css - 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/

Answer 2

と列に追加height:100%します。bodyhtml