0

I set the min-height of an object on my page based on the size of the window. It works perfectly in all browsers but IE (of course). How can I fix it?

function resize() {
	document.getElementById('container').style.minHeight = window.innerHeight + "px";
}

The function runs on body load and resize.

Thanks for any help,
David

Edited by nizuya: n/a

2
Contributors
2
Replies
4
Views
7 Years
Discussion Span
Last Post by nizuya
1

window.innerHeight isn't supported in IE. From this website http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

window.innerHeight/Width
Provided by most browsers, but importantly, not Internet Explorer.
document.body.clientHeight/Width
Provided by many browsers, including Internet Explorer.
document.documentElement. clientHeight/Width
Provided by most DOM browsers, including Internet Explorer.

0

Thanks a lot Scrapped the link was very helpful!

For anyone interested this is the code I ended up using:

function getWindowHeight() {
	var windowHeight = 0;
	if (typeof(window.innerWidth) == 'number') {
		//Non-IE
		windowHeight = window.innerHeight;
	}
	else if (document.documentElement && document.documentElement.clientHeight) {
		//IE 6+ in 'standards compliant mode'
		windowHeight = document.documentElement.clientHeight;
	}
	else if (document.body && document.body.clientHeight) {
		//IE 4 compatible
		windowHeight = document.body.clientHeight;
	}
	return windowHeight;
}
function resize() {
	document.getElementById('container').style.minHeight = getWindowHeight() + "px";
}
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.