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
2) Transform iframe Tag behavior in CSS
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>
