Monday, December 12, 2011

Create Full Screen Iframe or Full window Iframe or Iframe mask in HTML CSS

Working with iframe masking, We need to load / mask any Sub domain or Back Office pages in full available browser screen. Here is the pleasant and cross browser approach  for iframe masking, with this simple css and html code we can make our web pages visible to Full Browser area, Full window area or full available browser screen. We can make  iframe full height of available browser screen



1)  Reset  page floating margins as 0px for html body, div, iframe tags

html 
{
 overflow: auto;
}
 
html, body, div, iframe 
{
 margin: 0px; 
 padding: 0px; 
 height: 100%; 
 border: none;
}


2)  Transform iframe Tag behavior in CSS

iframe 
{
 display: block; 
 width: 100%; 
 border: none; 
 overflow-y: auto; 
 overflow-x: hidden;
}

2)  Setting iframe properties for resolve cross browser issues.

<iframe id="tree" name="tree" src="http://www.w3lessons.com/" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="auto"></iframe>



Example Full screen iframe html Page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>W3Lessons.com Full Windows, Full Screen Iframe</title>
<style type="text/css">
html 
{
 overflow: auto;
}
 
html, body, div, iframe 
{
 margin: 0px; 
 padding: 0px; 
 height: 100%; 
 border: none;
}
 
iframe 
{
 display: block; 
 width: 100%; 
 border: none; 
 overflow-y: auto; 
 overflow-x: hidden;
}
</style>
</head>
<body>

<iframe id="tree" name="myiframe" src="http://www.w3lessons.com/" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="auto"></iframe>

</body>
</html>


9 comments:

  1. Ah finally the one that works!! You saved the day man. Thank you

    ReplyDelete
  2. Thanks. This worked pretty well.

    ReplyDelete
  3. Thanks, Jailani, it really works! Nice.

    ReplyDelete
  4. It worked like a charm! Thanks!

    ReplyDelete
  5. Awesome, exactly what I needed, thanks :)

    ReplyDelete
  6. Thank you, you´re awesome, works perfect!

    ReplyDelete
  7. Hi. It works good on Firefox and IE. But what about Chrome? Still 2 scrollbars

    ReplyDelete
  8. How to make whole website in Full Screen Mode as like F11 without pressing f11 always open in full screen mode

    ReplyDelete