how do I set height of container DIV to 100% of window height?

height css
Nick picture Nick · Dec 12, 2011 · Viewed 109.8k times · Source

I have a couple of problems with my container DIV. For one it is not recognising the height of my content correctly (I would have thought it would extend beyond the bottom of the main content and sidebar, but it isn't). You can see what I mean on this page.

I would also like the container DIV to always fill the available height of the screen/window. I have tried setting it to min-height:100%, but this didn't have any effect.

Here is the CSS I am using for the container DIV:

#container {
  padding: 0;
  margin: 0;
  background-color: #292929;
  width: 1200px;
  margin: 0 auto;
  min-height: 100%;
}

I would be grateful for any help to get this working.

Thanks,

Nick

Answer

ptriek picture ptriek · Dec 12, 2011

Add this to your css:

html, body {
    height:100%;
}

If you say height:100%, you mean '100% of the parent element'. If the parent element has no specified height, nothing will happen. You only set 100% on body, but you also need to add it to html.

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
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, …

Read More
make div's height expand with its content

I have these nested divs and I need the main container to expand (in height) to accommodate the DIVs inside <!-- head --> ... <!-- /head --> <body class="main"> <div id="container"> &…

Read More