DIV background does not span 100% for entire body_问答_开发者

I'm posting this because I am going crazy.

I have a page where the content is centered in the page and must span from top to bottom no matter the content, with two columns.

So I have a content div with a left child div and a right child div. The code is the following:

<html>
<head>
  <style type="text/css">
    html, body {
      margin-top: 0px;
      margin-bottom: 0px;
      height: 100%;
    }

    .main {
      min-height: 100%;
      margin: auto;
      width: 400px;
      background-color: red;
    }

    .left {
      width: 100px;
      padding: 0px;
      heig开发者_StackOverflow社区ht: 100%;
      float: left;
      background-color: blue;
    }

    .right {
      width: 300px;
      height: 100%;
      padding: 0px;
      float: right;
      background-color: green;
    }
  </style>
</head>
<body>
  <div class="main">
    <div class="left">
      Left
    </div>
    <div class="right">
      Right
    </div>
  </div>
  </body>
</html>

This works fine and the div spans to the bottom. I see two columns green and blue. The problem is that this does not work if the content in the divs (left or right) is larger then the browser window. Add a lot of content to the left or right div and you should see what I'm talking about, something like:

<div class="main">
  <div class="left">
    Left<br>
    Left<br>
    Left<br>
    Left<br>
    .... <!-- lots of these -->
  </div>
  <div class="right">
    Right<br>
    Right<br>
    Right<br>
    .... <!-- lots of these -->
  </div>
</div>

My question is, why is this happening (I have set html, body { height: 100%; }) and how can I fix it?

I am going crazy. Please help me!

Thank you!

Are you clearing floats?

.main:after { content:""; clear:both;display:block; }

EDIT: In your SO code you use min-height whereas in the example you use regular height for .main. See, typos and human errors do happen a lot, which is why I wanted the real code.

I edited it for you: http://jsfiddle.net/Gd34j/1/

You could also try loading the colors as a background image on the page. Create a 1200px by 10px image with your background, then in your main container set background:url("bluegreen.jpg"), then set background-repeat to repeat-y.

Thanks to meder who pointed me on the right track, I finally managed to make it run consistently in IE, Mozilla and Chrome. Here is the complete code, hope it helps someone else too:

<html>
<head>
<style type="text/css">
html,body {
    margin: 0px 0px 0px 0px;
    height: 100%;
    text-align: center;
}

.main:after {
    content: "";
    display: block;
    clear: both;
}

.main {
    background-color: red;
    width: 400px;
    min-height: 100%;
    margin: auto;
   text-align: left;
}

.left {
    width: 100px;
    padding: 0px;
    float: left;
    min-height: 100%;
    background-color: blue;
}

.right {
    width: 300px;
    min-height: 100%;
    padding: 0px;
    float: right;
    background-color: green;
}
</style>
</head>
<body>
<div class="main">
<div class="left">Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
</div>
<div class="right">Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
</div>
</div>
</body>
</html>

If you have floating elements in a non floating element, they will not expand the parent element. Just a floating to the main element:

.main {
  min-height: 100%;
  margin: auto;
  width: 400px;
  background-color: red;
  float: left; /* adding floating so the parent elements expands */
}