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

Recommended Answers

All 2 Replies

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.

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";
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.