fit wrapper to 100% width and height

Question

I would like to create a div which fits the full height and width of the browser viewport. I just thought about simple css like:

#wrapper { width: 100%;
           height: 100%;
           background-color: red;
}

but it does not work for the height. The #wrapper does not have any height. Why?

Thanks in advance.

You'll need to add `height: 100%;` to the `` and `` elements as well — Adrift, Sep 02 '13 at 19:51
The question has already been answered here [http://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height][1] [1]: http://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height — , Sep 02 '13 at 19:57

score 7 · Accepted Answer · answered Sep 02 '13 at 19:52

7

#wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: red;
}

or

html, body { height: 100% }

#wrapper {
    width: 100%;
    height: 100%;
    background-color: red;
}

answered Sep 02 '13 at 19:52

yckart

exactly what I needed. But could you explain why I have to declare the height in the body and htmls css and the width not? – supersize Sep 02 '13 at 20:02
@supersize Sure! A `div` per default a block-element (`display:block`) if your set `display` to `inline` for example this will not work anymore. You can read more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/display and here: http://dev.w3.org/csswg/css-box/#display – yckart Sep 02 '13 at 20:04

score 1 · Answer 2 · answered Sep 02 '13 at 19:52

1

How about this:-

#wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: red;
}

or

html { height: 100% }
body { height: 100% }

answered Sep 02 '13 at 19:52

Rahul Tripathi

2 Answers2