1

Can you set and force a div's height to be 100% of the browser window, 100% of a div, and 100% of a table cell? I can't find a solution that's not a complicated hack in stack overflow or elsewhere.

ryanjohnsond
  • 393
  • 2
  • 8
  • 19

3 Answers3

3

It can be possible using absolute positioning 

.fullHeight
{
 position: absolute; 
 top: 0px; 
 bottom: 0px;
}
Sachin
  • 40,216
  • 7
  • 90
  • 102
  • 1
    I thought absolute positioning is a wicked, evil thing to use. – ryanjohnsond Jul 02 '13 at 21:45
  • @user2374200: It's not recommended but for certain occasions (e.g. A warning banner when entering a site) it is very useful. Just don't apply it when it's unnecessary. – Jean-Paul Jul 02 '13 at 21:47
  • 1
    But it's all are depends on our requirement. If we want something like this then I don't think its a bad practice – Sachin Jul 02 '13 at 21:48
3

Percentage height is measured as a percentage of its parent element. If you want to make a div occupy 100% of the browser window then you need to give 100% to the body (its parent) as well:

html, body {
    height: 100%;
}

If the div is contained in another element, then this also would need to use 100% (meaning 100% of its parent element) or be given a specific height.

Andy G
  • 19,232
  • 5
  • 47
  • 69
  • 1
    Thank you @mgamba. There is a proviso, though, in that this height 100% doesn't take into account the padding or borders of the parent element. So we can find that, for example, the body appears below the div, sometimes causes an unwanted scrollbar to appear. This issue is discussed in detail [here](http://stackoverflow.com/questions/485827/css-100-height-with-padding-margin) – Andy G Jul 02 '13 at 22:14
-1

Try making the bottom margin 100%.

margin-bottom: 100%;
Tony C
  • 157
  • 1
  • 2