How to make a DIV fill the whole screen after page loading

Question

We are making a website for the TEDx in our city and we're stuck..

Here's a draft copy of it: tedx.mozerov.ru

We have a div id="section-event" which we want to be for the whole page on loading. We added the height:100%; and width:100%;, but the block is still does not fill the whole page :(

Please help!

Answer 1

好吧，不知道你将如何使用这个div，但是：

position: absolute; top: 0; left: 0; height: 100%; width: 100%;

Answer 2

Apply height:100% to both the html and body elements. I just tested in FireBug and I think it achieves the effect you want.

Answer 3

I still cannot comment on other people's answers so here is my answer and it's only a simple addition to uotonyh's that may work.

Make the position absolute and add an arbitrary z-index. As long as the z-index is higher than the other absolute/relative DIVs, then it should take up the entire viewport. If you see a space on the top and left side, then add margin: 0px; to your body css tag.

Ex.

#section-event {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 99;
}

Answer 4

It depends on your website layout, sometimes you have incompatibilities. But in general something like this works:

http://jsfiddle.net/8Pvtk/

#redoverlay {
    background-color: red;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

I've seen this being used in some sites where the <div id="redoverlay"></div> element exists at all times, but is with its visibility disabled. When its needed its set to visible by JavaScript.

Answer 5

What you probably need is margin: 0px in body

http://jsfiddle.net/pVNhU/