html - 带有粘性页脚的 3 列 css 布局 - 列 100% 高度？

Question

结合我发现的两个例子:

http://alistapart.com/article/holygrail

http://mystrd.at/modern-clean-css-sticky-footer/

我想出了这个布局。

http://jsfiddle.net/xVuh5/

这很好，但我希望 3 列的高度为 100%。

有人可以帮忙吗？

谢谢

SO 编辑器验证要求在文本中包含 jsfiddle 的 html 和 css 脚本正文:

<div id="header">This is the header.</div>

<div id="container">

    <div id="center" class="column">
        <h1>This is the main content.</h1>
        <p>Text Text</p>
    </div>

</div>

<div id="footer">This is the footer.</div>

    /*** The Essential Code ***/
    * /* For CSS Reset */ 
    { 
        padding: 0; 
        margin: 0; 
    } 

    html {
        position: relative;
        min-height: 100%;
    }

    body {
        min-width: 630px;         /* 2 x (LC fullwidth + CC padding) + RC fullwidth */
        margin: 0 0 100px; /* bottom = footer height */
    }

    html, body {
        height: 100%;
        width: 100%;
    }

    #container {
        padding-left: 200px;      /* LC fullwidth */
        padding-right: 190px;     /* RC fullwidth + CC padding */
    }

    #container .column {
        position: relative;
        float: left;
    }

    #center {
        padding: 10px 20px;       /* CC padding */
        width: 100%;
    }

    #left {
        width: 180px;             /* LC width */
        padding: 0 10px;          /* LC padding */
        right: 240px;             /* LC fullwidth + CC padding */
        margin-left: -100%;
    }

    #right {
        width: 130px;             /* RC width */
        padding: 0 10px;          /* RC padding */
        margin-right: -100%;
    }

    #footer {
        clear: both;
        position: absolute;
        left: 0;
        bottom: 0;
        height: 100px;
        width: 100%;
    }

    /*** IE Fix ***/
    * html #left {
        left: 150px;              /* RC fullwidth */
    }

    /*** Just for Looks ***/

    body {
        margin: 0;
        padding: 0;
        background: #FFF;
    }

    #header, #footer {
        font-size: large;
        text-align: center;
        padding: 0.3em 0;
        background: #999;
    }

    #left {
        background: #66F;
    }

    #center {
        background: #DDD;
    }

    #right {
        background: #F66;
    }

    #container .column {
        padding-top: 1em;
        text-align: justify;
    }

正如我看到的第一个答案遗漏了我的问题的要点，我添加这张图片是为了让问题更清楚。

Answer 1

实际上，我会采用不同的方式。

纯 CSS 解决方案，完全响应式，无需固定任何高度(页眉或页脚)

这是 Demo

唯一的缩减是您必须按特定顺序构建 HTML。 (页脚位于列之前)

<div class="Container">
    <div class="Header">
        <h1>Header</h1>
    </div>
    <div class="HeightTaker">
        <div class="Wrapper Container Inverse">
            <div>
                <div class="Footer">
                </div>
            </div>
            <div class="HeightTaker">
                <div class="Wrapper Content">
                    <div class="Table">
                        <div class="Column C1">
                        </div>
                        <div class="Column C2">
                        </div>
                        <div class="Column C3">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

列宽可以是固定的，也可以不是.. 取决于您的意愿。