How to make a div 100% of page (not screen) height?
I'm trying to use CSS to create a 'greyed out' effect on my page while a loading box is displayed in the foreground while the application is working. I've done this by creating a 100% height/width, translucent black div which has its visibility toggled on/off via javascript. I thought this would be simple enough; however, when the page content expands to the point that the screen scrolls, scrolling to the foot of the page reveals a portion which is not greyed out. In other words, the 100% in the div's height seems to be applying to the browser viewport size, not the actual page size. How can I make the div expand to cover the whole of the page's content? I've tried using JQuery .css('height', '100%') before toggling it's visibility on but this doesn't change anything.
This is the CSS of the div in question:
div.screenMask
{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1000;
background-color: #000000;
opacity: 0.7;
filter: alpha(opacity=70);
visibility: hidden;
}
Thanks.
I realize I'm answering this long, long after it was asked, but I landed here after being briefly tripped up by this issue, and none of the current answers are correct.
Here's the right answer:
body {
position: relative;
}
That's it! Now your element will be positioned relative to <body> rather than the viewport.
I wouldn't bother with position: fixed , as its browser support remains spotty. Safari prior to iOS 5 didn't support it at all.
Note that your <div> element will cover <body> 's border-box (box + padding + border), but it won't cover its margin. Compensate by setting negative positions on your <div> (eg top: -20px ), or by removing <body> 's margin.
I'd also recommend setting <body> to height: 100% to ensure you don't ever end up with a partially-masked viewport on a shorter page.
Two valid points taken from prior answers. As Ben Blank says, you can lose the width and height declarations, positioning all four corners instead. And mercator is right that you should use an ID instead of a class for such an important single element.
This leaves the following recommended complete CSS:
body {
position: relative;
margin: 0;
}
#screenMask {
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
z-index: 1000;
background-color: #000;
opacity: 0.7;
filter: alpha(opacity=70);
visibility: hidden;
}
And HTML:
<body>
<div id="screenMask"></div>
</body>
I hope this helps somebody else!
div.screenMask
{
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
z-index: 1000;
background-color: #000000;
opacity: 0.7;
filter: alpha(opacity=70);
visibility: hidden;
}
By setting all of top , bottom , left , and right , the height and width are automatically calculated. If screenMask is a direct child of the <body> element and the standard box model is in effect (ie quirks mode has not been triggered), this will cover the entire page.
上一篇: HTML布局，高度100％