CSS获取浮动DIV以拉伸到窗口高度

Question

多年来第一次使用CSS进行了涂鸦，我有一种讨厌的感觉，我已经把自己放在了角落里。

我用这个创建了一个3列浮动布局：

* {
    margin: 0;
    padding: 0;
    font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
}

    #wrapper {
        width: 960px;
        background: silver;
        margin: 0 auto;
    }

#column-left {
    width: 240px;
    float: left;
    background: #f4d2d4;
    padding-top: 36px;
}

#column-center {
    margin-top: 41px;
    margin-left: 34px;
    margin-right: 34px;
    width: 492px;
    float: left;
    background: white;
}

#column-right {
    width: 160px;
    float: left;
    background: white;
    margin-top: 49px;
}

如您所见，左侧列具有彩色背景。但它并没有延伸到页面的底部，只是为了覆盖内容。我需要它一直向下伸展。

切换到3列布局的绝对或固定螺钉位置。使用高度：100％必须一直回到身体，这完全混淆了一切。有没有一种简单的方法来解决这个问题？

Answer 1

丹·塞德霍尔姆（Dan Cederholm）有一种很好的方法，可以看到柱子延伸使用＆＃34; faux column＆＃34;技术。我不是重写它，而是在这里链接它：

http://www.alistapart.com/articles/fauxcolumns/

如果您决定使用流畅的布局，Chris Coyier还会很好地写出不同的人解决这个问题的方法：

http://css-tricks.com/fluid-width-equal-height-columns/

Answer 2

将height:100%添加到body，html和您的列。