结合两个例子我发现:
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;
}
当我看到第一个答案没有抓住我的问题的要点时,我添加了这张图片以使问题更清晰。
![enter image description here](https://i.stack.imgur.com/oVCk4.jpg)
事实上,我会采取不同的做法。
纯 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>
列宽可能是固定的,也可能不是……随您的意愿。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)