Question

我有三部分布局：标题，内容和页脚。我对绝对定位技术非常熟悉;当我希望内容div扩展到可用高度的100％时，我会经常使用它。

在这种情况下，我的问题是我事先并不知道页脚的高度，它是基于其自身内容的动态，其内容具有未知数量的行（通常在1到3行之间）。登记/> 我想主要的内容div抓住100％的可用高度，考虑到标题的高度（这是固定的，所以这是一个不用脑子）和页脚的高度因此我不能使用绝对定位技术这里。

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

Answer 1

试试这个

<!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>

css-only 100％div高度与动态高度页脚

1 个答案: