Have Geek Brain

Without javascript, can I style the div to hide the current document including its margins?

this can be done with javascript, but only with CSS, is it possible to style the div to overlap exactly any page document or viewport content (to apply an opaque gray layer on the page)? as the page might have a margin for the body element, so styling a div to the width of its body element won't do. (needs to work in IE 6 too)

+1


a source to share


3 answers


IF you have <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 headroom and it covers the entire view screen for me in IE and FF.

+3


a source


height: 100% will not cover the viewport if the document length is less than the viewport height. In this case, you will have to use Javascript.



0


a source


Would it be a mistake to use IE's ability to execute javascript in CSS?

width:expression(document.body.clientWidth)
-1


a source






More articles:


All Articles