结合我发现的两个例子:
http://alistapart.com/article/holygrail
http://mystrd.at/modern-clean-css-sticky-footer/
我想出了这个布局.
它很棒,但我希望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; }
正如我所看到的第一个答案错过了我的问题,我正在添加此图像以使问题更清楚.
解决方法
实际上,我会采用不同的方式.
纯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>
列宽可以固定,也可以不固定.