<div>
Set all it's ancestor elements' height to 100%, including html and body:<br />
<br />
html, body {height:100%;}<br />
<br />
#theMasksParent {height:100%;}<br />
and so on...
</div>


Set all it's ancestor elements' height to 100%, including html and body:

html, body {height:100%;}

#theMasksParent {height:100%;}
and so on...

<div>
any idea why on ie7 i get 4 pixels to many in the result for height returned by getPageSizeWithScroll &nbsp;?<br />
<br />
SnowFlake
</div>


any idea why on ie7 i get 4 pixels to many in the result for height returned by getPageSizeWithScroll  ?

SnowFlake

<div>
<div class="content wysiwyg-content">
Hi -<br />
<br />
I need a div to be 100% of the page height, rather than the browser window height. &nbsp;Here's my div style:<br />
<br />
#lyrMask {<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;z-index: 2; &nbsp; <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visibility: hidden;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 0px;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 0px;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100%;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 200%;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-opacity: 0.6;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: .60;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;filter: alpha(opacity=60);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: #CCC;<br />
}<br />
<br />
This is a mask over which I place a &quot;pop-up&quot; for users to make a selection on. &nbsp;The mask is to prevent them from clicking anything else on the underlying page and to focus their attention on the div placed on top of the mask outlined above. &nbsp;The problem is that they can simply scroll down the page, and since the mask is only as high as the browser window, they have access to any links below the mask.<br />
<br />
Any ideas?<br />
<br />
Thanks,<br />
<br />
Rod
</div>
</div>


Hi -

I need a div to be 100% of the page height, rather than the browser window height.  Here's my div style:

#lyrMask {
	z-index: 2;   
	visibility: hidden;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 200%;
	-moz-opacity: 0.6;
	opacity: .60;
	filter: alpha(opacity=60);
	background-color: #CCC;
}

This is a mask over which I place a "pop-up" for users to make a selection on.  The mask is to prevent them from clicking anything else on the underlying page and to focus their attention on the div placed on top of the mask outlined above.  The problem is that they can simply scroll down the page, and since the mask is only as high as the browser window, they have access to any links below the mask.

Any ideas?

Thanks,

Rod

CSS div to 100% of page size

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and  in almost every mainstream web browser.

JavaScript

Web development includes all aspects of presenting content on intranets and the Internet, including delivery development, protocols, languages and standards, server software, browser clients, databases and multimedia generation.