使html列一直向下扩展而不会破坏布局

Question

我有这个布局： http://jsfiddle.net/spadez/BN9KJ/2/

通过选择左列来实现。即使没有足够的内容来填充它，如何让列颜色一直向下扩展到页面。

我以为它会是这样的：

height: auto;

但这似乎不起作用

Answer 1

添加以下css

html,body{
height:100%;
}

然后将height: 100%应用于div

工作fiddle

Answer 2

逻辑：设置正文的高度，html元素，因为它是父元素.. !!

但是我们为什么要同时提供html和body - ＆gt;身高：100％?? 答案是https://stackoverflow.com/a/6654996/2967572

  

Body查看其父级（HTML）以了解如何扩展动态属性，   所以HTML元素也需要设置它的高度。

给予

#left_column {
    width: 250px;
    background-color: orange;
    float: left;
  height:100%;  //added

}

与

一起

html,body{

    height:100%;
}

DEMO

<强> BUT

  

然而，身体的内容可能需要动态改变。   将min-height设置为100％将实现此目标。

这将是给min-height

的好方法

  #left_column {
        width: 250px;
        background-color: orange;
        float: left;
      min-height:100%;  //added

    }

DEMO with Min-height