Angelica Perduta Posted September 20, 2013 Share Posted September 20, 2013 Consistently on Internet Explorer, Google Chrome and FireFox specifying a height of 100% is too big for the window and I have to subtract 17 pixels. To see what I want try resizing window on my example here. Just wondering if there isn't a standard way in CSS without needing a script.? <!doctype html><html lang="en" style="height:100%; overflow:hidden"><!-- Note: FireFox html5 needs to be told to use the whole window --><head> <meta charset="utf-8" /> <title>iframe height</title> <script src="../jquery-2.0.3.js"></script> <script> $(function() { var $myframe = $("#myframe"); function mainresize() { $myframe.height(window.innerHeight - 17); } $(window).resize(mainresize); mainresize(); }); </script></head><body style="height:100%"> <iframe id="myframe" src="ipsum-lorem.html" style="width:100%"></iframe></body></html> Link to comment Share on other sites More sharing options...
harpalsinh999 Posted September 20, 2013 Share Posted September 20, 2013 put this frame code in your code <iframe id="myframe" style="width: 100%; height: 623px;" </iframe> Link to comment Share on other sites More sharing options...
Angelica Perduta Posted September 20, 2013 Author Share Posted September 20, 2013 (edited) put this frame code in your code <iframe id="myframe" style="width: 100%; height: 623px;" </iframe> Thanks harpalsinh999. I did try try this... In the image below I have one window using javascript and it always looks nice but it seems silly I have to use script just to get my frame to fit in the window. The second window is what you suggest, but alas it only looks right when the window happens to match width and height and a lot depends on user zoom setting too. The 3rd one I specified both width and height as 100% and my frame is ALWAYS too big. Setting a lower percentage I end up too big for small windows and too small for big windows... CSS needs to address the issue of percentages and pixels somehow... like 100% - 17px perhaps? Edited September 20, 2013 by Angelica Perduta Link to comment Share on other sites More sharing options...
harpalsinh999 Posted September 21, 2013 Share Posted September 21, 2013 (edited) here is example without javascript <!DOCTYPE html><html> <head> <style> html, body {margin:0; padding:0; height:100%} #container {height:100%; width: 1345px; min-height: 550px;} #iframe {height: 100%; width: 100%; display: block} </style> </head> <body> <div id="container"> <iframe id="iframe" src="index.php"></iframe> </div> </body></html> Edited September 21, 2013 by harpalsinh999 Link to comment Share on other sites More sharing options...
harpalsinh999 Posted September 21, 2013 Share Posted September 21, 2013 u can scroll off using scrolling="no" in <iframe id="iframe" src="index.php" scrolling="no"></iframe> Link to comment Share on other sites More sharing options...
harpalsinh999 Posted September 21, 2013 Share Posted September 21, 2013 also try this example <!DOCTYPE html><html> <head> <style> html, body { height: 79%;margin: 6px; padding: -5px;} #container { height: 46%;min-height: 654px;width: 1328px;} #iframe {display: block;height: 100%;width: 100%;} </style> </head> <body> <div id="container"> <iframe id="iframe" src="index.php"></iframe> </div> </body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now