it can be done using javascript, but with CSS alone, is it possible to style a div to overlap exactly any page's document content or viewport (to apply an opaque gray layer on the page)? since a page can have margin for it body element, so styling a div to the width of its body element won't do. (needs to work in IE 6 too)
views:
256answers:
3
+3
A:
IF you have a <div> like this:
<div id="cover"></div>
These styles should do it:
#cover {
background-color: #ccc;
opacity: 0.6;
filter:alpha(opacity=60);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Tested on a page where the body has a margin and it covered the entire viewport for me on IE and FF.
Paolo Bergantino
2009-05-15 18:48:57
While this is the only way to do it (certainly I can't think of another), I'd advise that you'd be making your document pretty useless to those who don't disable CSS. And if it's an attempt at security, it's only through obscurity (since disabling CSS is pretty easy).I think, to make this useful, you'd need to use JS (or other) to allow the document to be used. Otherwise what's the point of publishing it?
David Thomas
2009-05-15 18:53:30
Well I'm assuming he wants to make some kind of modal application but wanted a pure CSS solution for the overlay.
Paolo Bergantino
2009-05-15 18:56:50
yes, wanted to style it using pure css.
動靜能量
2009-05-15 18:59:47
A:
would it be cheating to use IE's ability to execute javascript in CSS?
width:expression(document.body.clientWidth)
mkoryak
2009-05-15 18:50:54
Sorry, I'm going to have to downvote this. Expressions are a _horrible_ idea. http://developer.yahoo.com/performance/rules.html
Paolo Bergantino
2009-05-15 18:52:10
I upvoted you because it is a solution, regardless of personal taste. Sometimes the only solution is an ugly one especially in these fringe circumstances. Also in that link it doesn't say don't use them, just to use discretion: "If you must use CSS expressions, remember that they may be evaluated thousands of times and could affect the performance of your page."
Dave L
2009-05-15 19:00:26
It's not a matter of "personal taste." The above code will be evaluated constantly. This question can be fairly easily solved using CSS, and whatever can't be done with CSS is fairly easily done with Javascript. Introducing a CSS Expression for this is completely unnecessary, and frankly there's really nothing where CSS expressions are in fact necessary. Not to mention they are not cross browser compatible.
Paolo Bergantino
2009-05-15 19:03:17
Look at dasha's answer, you can not cover up the entire screen if the document length is less than the height of viewport using straight CSS, you have to use javascript be it as an expression or loaded as a script. This IS an answer. That's the purpose of this site, to post answers.
Dave L
2009-05-15 19:15:04
That answer is also incorrect. It works fine. The only situation where it doesn't work is if the HTML tag has a margin, and in that case you can use Javascript _once_ to correct it. Using a CSS expression is wrong. This website is for the _right_ answers, and the _wrong_ answers are downvoted.
Paolo Bergantino
2009-05-15 19:54:47
A:
height: 100% won't cover the viewport if document length is less than height of viewport. In this case you will have to use Javascript.
dasha salo
2009-05-15 18:55:33
And even if it wasn't all that's needed is to add `right: 0; bottom: 0;` to the css.
David Thomas
2009-05-16 14:59:59