Missing scrollbars for 100% fixed width/height iFrame
Question
I want to load a responsive site in a maximized (width and height = 100%) iframe and then fix the width and height from 100% to the corresponding pixel-values, so if the outer window gets shrinked, the responsive-site stays at the previous maximized-dimensions.
The following code works, but if you make the window smaller, there are no scrollbars.
How can I make the scrollbars appear automatically, like overflow:auto? I do need 100% initial dimensions, because my responsive iframe content is very old and makes problems while resizing, so I can't resize the iframe later on.
<!DOCTYPE html> <html> <head> <style> * { padding: 0; margin: 0; } #wrapper { position:fixed; top:0; left:0; width:100%; height:100%; } #wrapper iframe { width:100%; height:100%; border:0 none; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script language="JavaScript" type="text/JavaScript"> <!-- $( document ).ready(function() { $('#wrapper').width($('#wrapper').outerWidth()); $('#wrapper').height($('#wrapper').outerHeight()); }); //--> </script> </head> <body> <div id="wrapper"> <iframe id="myFrame" src="https://getbootstrap.com/examples/grid/" frameborder="0"> <p>Your browser does not support iframes.</p> </iframe> </div> </body> </html>
1 answers
solution1
0 2015-10-23 13:10:03
I found the solution by myself. The trick was to set body and html to 100% height, remove the position:fixed of the wrapper and add "display:block" to the iframe. Without the display:block there was a little space at the end of the iframe, so the vertical scrollbar was always visible.
body, html {
width: 100%;
height: 100%;
}
* {
padding: 0px;
margin: 0px;
}
#wrapper { width:100%; height:100%; }
#wrapper iframe { display: block; width:100%; height:100%; border:0 none;}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.