Question

I have a div called ‘main-container’ that I want to be the height of my content. At the moment, the div is only as tall as my browser window. I’ve tried to correct this like so:

html, body{
  height: 100%;
  background-color: $main-background-color;
}

#main-container {
  width: 1024px;
  height: 100%;
  background-color: darken($main-background-color, 5%);
}

Unfortunately, this doesn’t work. I’ve also tried:

#main-container {
  width: 1024px;
  min-height: 100%;
  height:auto !important;
  background-color: darken($main-background-color, 5%);
}

This has no effect, either. I’ve also reworked my layout not use floats, but that didn’t solve the problem. After scouring the net, I haven’t found any other solutions that work. Does anyone else have an idea?

Also, I don’t know if this would affect things, but I’m using Rails 3.

Answer 1

At the bottom of your #main-container div, insert the following code:

<div id="push"></div>

Then in your CSS, add the following:

#push {
    clear:both;
}

This should then push the whole container to the height of the content, regardless of floating divs.