How to set the height to 100% of the page?

Question

I wanted to expand my div all the way from top to bottom even thought I don't have enough elements inside my div.

I have set CSS like

#content{
    margin-top: 10px;
    padding: 15px;
    display:block;
    height:100%
    background-color:red;
}

my html

<div id='content'>
    just a little bit of contents here.
</div>

I want to see the red background all the way from top to bottom of the page.

How can I do this?

Thanks a lot

score 2 · Answer 1 · edited May 22 '14 at 23:27

2

You can make it work by adding this CSS code:

html, body {
    height: 100%;
}

edited May 22 '14 at 23:27

Ry-

answered May 22 '14 at 23:25

TheBokiya · Answer 2 · 2014-05-22T23:32:17.807

2

#content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: red;
}

edited May 22 '14 at 23:32

answered May 22 '14 at 23:27

TheBokiya

Note that you don’t need to specify units for zeroes. – Ry- May 22 '14 at 23:31
1

@false yes 'px' is not needed here. Corrected. – TheBokiya May 22 '14 at 23:32

score 0 · Answer 3 · answered May 22 '14 at 23:29

0

Add this to your content div, works a treat!

height: 100vh;

answered May 22 '14 at 23:29

user3479267

2

Neat solution. However the browser support for this method isn't so good (62% overall): http://caniuse.com/viewport-units – display-name-is-missing May 22 '14 at 23:30

3 Answers3