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)有一种很好的方法,可以使用"人造柱"技术使柱子延伸.而不是重写它,我会在这里链接它:

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

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

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