我正在尝试创建一个包含 4 个 div 的布局；页眉、页脚和左右栏。
页眉应该在顶部，填满整个宽度，高度为 50 像素。 页脚应固定在窗口底部，高度也为 50px。 左右 div 应该相邻，并填满页眉底部和页脚顶部之间的所有空间(垂直)。
这看起来应该非常简单，但过去 5 个小时我都花在这上面，但无法让它正常工作。
我能做的最好的是:
<body>
<div class="BodyWrapper">
<div id="Header"></div><!-- End Header -->
<div class="Left LeftColumn">asds</div>
<div class="Right RightColumn"></div>
<div class="push"></div>
</div><!-- End Body -->
<div id="Footer"></div><!-- End Footer -->
CSS:
*{
padding:0px;
margin:0px;
}
html, body {
height:100%;
font-family:verdana;
font-size:11px;
color:#646464;
}
.BodyWrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px;
overflow:hidden;
}
#Footer, .push {
height: 4em;
}
.Left {
float:left;
}
.Right {
float:right;
}
.LeftColumn {
width:20%;
height:100%;
margin-bottom:-52px;
border:1px solid gray;
background:red;
}
.RightColumn {
width:70%;
height:100%;
margin-bottom:-52px;
border:1px solid gray;
background:green;
}
#Header {
height:49px;
background:blue;
border-bottom:1px solid black;
}
#Footer {
height:49px;
background:blue;
border-top:1px solid black;
}
这样做的结果几乎是我想要的，但是左右栏一直延伸到页面底部并覆盖页脚。我真正想要的是给他们 100% 减去 50px 的高度。有什么建议么？或者一个有效的例子？
最佳答案
我知道，我知道 - table 是邪恶的。但他们在这里工作得很好!所有的高度和宽度问题都由表格本身的实现来解决。
<table>
<tr id="header">
<td>Header Stuff</td>
</tr>
<tr id="cols">
<td style="width:20%" id="leftcol">Left col Stuff</td>
<td style="width:80%" id="rightcol">Right Col Stuff</td>
</tr>
<tr id="footer">
<td>Copyright Whatever footer stuff</td>
</tr>
</table>
关于CSS 两列全高固定页脚？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5872640/