Make body have 100% of the browser height

html css height
bodyofheat picture bodyofheat · Jul 11, 2011 · Viewed 953.3k times · Source

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.

Answer

BentOnCoding picture BentOnCoding · Jul 11, 2011

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%;
}

Related questions

How to make a div 100% height of the browser window

I have a layout with two columns - a left div and a right div. The right div has a grey background-color, and I need it to expand vertically depending on the height of the user's browser window. Right now …

Read More
How to get div height to auto-adjust to background size?

How do I get a div to automatically adjust to the size of the background I set for it without setting a specific height (or min-height) for it?

Read More
Why doesn't height: 100% work to expand divs to the screen height?

I want the carousel DIV (s7) to expand to the height of the entire screen. I haven't an idea as to why it's not succeeding. To see the page you can go here.

Read More