我尝试了很多方法,经过三天的搜索和工作都没有成功。
html:
<div id="wrapper">
<div id="header"></div>
<div id="container">
<div id="containertable">
<div id="leftbar"></div>
<div id="contents"></div>
<div id="rightbar"></div>
</div>
</div>
<div id="footer"></div>
</div>
CSS:
<style>
html{
overflow-y: scroll;
}
html,
body {
margin:0 auto;
padding:0;
height:100%;
width: 1024px;
}
#wrapper {
min-height:100%;
position:relative;
background: blueviolet;
}
#header {
background:#ff0;
width: 1024px;
height: 70px;
}
#container {
padding-bottom:60px; /* Height of the footer */
display: table;
}
#containertable{
width: 1024px;
display: table-row;
}
#leftbar, #rightbar{
width: 170px;
height: 100px;
display: table-cell;
background: brown;
}
#contents{
width: 684px;
height: 200px;
display: table-cell;
background: burlywood;
}
#footer {
width: 1024px;
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
使用上面的代码和其他版本,我能够得到第一种和第二种情况,但我无法使列保持 100% 高度和相等并将页脚推到页面底部。
在下图中,我正在寻找所有情况下的第三种情况。