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>
Thanks!
ReplyDeleteAh finally the one that works!! You saved the day man. Thank you
ReplyDeleteThanks. This worked pretty well.
ReplyDeleteThanks, Jailani, it really works! Nice.
ReplyDeleteIt worked like a charm! Thanks!
ReplyDeleteAwesome, exactly what I needed, thanks :)
ReplyDeleteThank you, you´re awesome, works perfect!
ReplyDeleteHi. It works good on Firefox and IE. But what about Chrome? Still 2 scrollbars
ReplyDeleteHow to make whole website in Full Screen Mode as like F11 without pressing f11 always open in full screen mode
ReplyDeleteah, finally... thank you.
ReplyDeletethank you <3
ReplyDeletehi, this works well, but browsers now block iframes for "security reasons" Is there a way to bypass this without needing the user to disable these settings?
ReplyDelete