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

Monday, December 12, 2011

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:

Anonymous said...

Thanks!

Zoran said...

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

julian said...

Thanks. This worked pretty well.

corelfordummy vector said...

Thanks, Jailani, it really works! Nice.

W3B said...

It worked like a charm! Thanks!

Henning said...

Awesome, exactly what I needed, thanks :)

Anonymous said...

Thank you, you´re awesome, works perfect!

Angels Abroad said...

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

SuRaj GiRi said...

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

Post a Comment