height:100%; not working

height:100%; not working

Solution 1:

html, body { height:100%; }

Solution 2 (Modern Approach):

As an alternative to setting both the html/body element's heights to 100%, you could also use viewport-percentage lengths:

5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

body {
    height: 100vh;
}

Setting a min-height also works.

body {
    min-height: 100vh;
}

These units are supported in most modern browsers - support can be found here.

Reference:

http://stackoverflow.com/questions/7049875/height100-not-working