htmlcssheight

Make body have 100% of the browser height

I want to make body have 100% of the browser height. Can I do that using CSS?

I tried setting height: 100%, but it doesn't work.

I want to set a background color for a page to fill the entire browser window, but if the page has little content I get a ugly white bar at the bottom.

Solution

  • Try setting the height of the html element to 100% as well. 

    html, 
body {
    height: 100%;
}

    Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have its height set as well.

    However the content of body will probably need to change dynamically. Setting min-height to 100% will accomplish this goal.

    html {
  height: 100%;
}
body {
  min-height: 100%;
}