3列css布局与粘性页脚 - 列100％高度？ [英] 3 column css layout with sticky footer - columns 100% height?

问题描述

结合两个例子，我发现：

唯一的缩小尺寸是您必须以特定顺序构建HTML。 （Footer在列之前）

 < div class =Container> 
< div class =Header> 
< h1>标题< / 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> 
  

列宽可以是固定的，也可以不是。

With combining two examples I've found:

http://alistapart.com/article/holygrail

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

I have come up with this layout.

http://jsfiddle.net/xVuh5/

And it is great but I would like to have the 3 columns 100% height.

Can anyone help please?

Thank you

Body of the html and css script as asked by the SO editor validation for including jsfiddle in the text:

<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;
    }

As I see the first answers coming in are missing the point of my question, I am adding this image to make the question clearer.

解决方案

Actually, I would do it differently.

Pure CSS solution, Totally responsive, Without fixing any height (header or footer)

Here's the Demo

The only downsize, is that you have to build your HTML in a certain order. (Footer comes before the columns)

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

The column width may be fixed, or not.. to you're will.

这篇关于3列css布局与粘性页脚 - 列100％高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！