Jump to content

innerHeight too big?


Angelica Perduta
 Share

Recommended Posts

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

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?

WidthHeight.png

Edited by Angelica Perduta
Link to comment
Share on other sites

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 by harpalsinh999
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...