HTML – 3列css布局与粘性页脚 – 列100％高度？

概述结合我发现的两个例子： http://alistapart.com/article/holygrail http://mystrd.at/modern-clean-css-sticky-footer/ 我想出了这个布局. http://jsfiddle.net/xVuh5/ 它很棒,但我希望3列100％的高度. 有人可以帮忙吗？ 谢谢 由SO编辑器验证在文本中包含jsfiddle的html和css 结合我发现的两个例子：

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

正如我所看到的第一个答案错过了我的问题,我正在添加此图像以使问题更清楚.

解决方法 实际上,我会采用不同的方式.

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

这是Demo

唯一缩小的是,您必须按特定顺序构建HTML. (页脚在列之前)

<div >    <div >        <h1>header</h1>    </div>    <div >        <div >            <div>                <div >                </div>            </div>            <div >                <div >                    <div >                        <div >                        </div>                        <div >                        </div>                        <div >                        </div>                    </div>                </div>            </div>        </div>    </div></div>

列宽可以固定,也可以不固定.

总结

以上是内存溢出为你收集整理的HTML – 3列css布局与粘性页脚 – 列100％高度？全部内容，希望文章能够帮你解决HTML – 3列css布局与粘性页脚 – 列100％高度？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。