0

我有一个三部分布局：页眉、内容和页脚。我非常熟悉绝对定位技术；当我希望内容 div 扩展到可用高度的 100% 时，我经常使用它。

在这种情况下，我的问题是我事先不知道页脚的高度，它是根据自己的内容动态的，它有未知的行数（通常在 1 到 3 行之间）。
我希望主要内容 div 在考虑页眉的高度（这是固定的，所以很容易）和页脚的高度之后，抓住 100% 的可用高度，因此我不能使用绝对定位技术这里。

我有一个涉及 javascript 的解决方案，但我试图找到一个仅 css 的解决方案。理想情况下，它应该是一个跨浏览器的解决方案（IE8、IE9、chrome、firefox 和 Safari）。

4

1 回答 1

0

尝试这个

<!doctype html>
<html>
<body>
<style>
html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;

}
#footer {
   position:absolute;
   bottom:0;
   width:100%;

   background:#6cf;
}
</style>
<div id="container">
   <div id="header">header</div>
   <div id="body">body</div>
   <div id="footer">footer</div>
</div>
</body>
</html>
于 2013-03-16T13:41:51.217 回答