Set the Div element to fill the whole screen?

[KenA]

Suppose I have the following script that creates a div element and set its width and height to fill the whole screen:

<script type="text/javascript">
	var oDiv = document.createElement('div');
	oDiv.style.width = window.screen.availWidth + "px";
	oDiv.style.height = window.screen.availHeight + "px";
	//oDiv.style.width = window.screen.width + "px";
	//oDiv.style.height = window.screen.height + "px";
	oDiv.style.border = "solid 1px #ccc";
	document.body.appendChild(oDiv );
</script>

well, the code above actually does the job, BUT a scrollbar (vertical and horizontal) is also created ... how to get rid of the scrollbars?

[vgarcia]

You're setting the div to be the size of the user's screen, not the size of the browser window. This will anger people who don't keep their browser windows maximized. Don't use screen.width/screen.height, use window.innerWidth and window.innerHeight or some other method instead.

[KenA]

... use window.innerWidth and window.innerHeight or some other method instead.

ok ... and how do I use it so it works also in IE ? not just in mozilla !

I also tried this:

oModalBackground.style.width = document.documentElement.clientWidth + "px";
oModalBackground.style.height = document.documentElement.clientHeight + "px";

but still the scrollbars are alive!

[MikeFoster]

Hi KenA, Welcome to SPF

For reference:

xClientWidth

xClientHeight