CSS高度:填充可用空间.没有固定的高度

Question

所以我有以下结构

<div id="container">
  <div id="head"></div>
  <div id="body"></div>
  <div id="foot"></div>
</div>

我只使用ID进行说明,所以这甚至不一定是整页.

我希望我的容器指定固定大小...或相对大小,无关紧要.让我们争论说300px的高度.也overflow: hidden

我希望头/脚扩展以适应其内部的内容,因此height: auto就足够了.

我希望身体扩大以适应头部和脚部之间的剩余空间.如果内容太大,则滚动(overflow: auto).

height: 100%on #body不起作用,因为它像父母一样获得300px的高度并将其自身和页脚的部分推出父级.

头部和脚部position: absolute不起作用是因为通过将它们从文档流中取出,一些内容#body被隐藏起来.为了解决这个问题,我们可以使用padding-top/bottom但是我们不能设置a padding-top: xxpx/ padding-bottom: xxpxon #body因为我们不知道头/脚的必要高度因此它们为什么height: auto.

编辑:

我尝试了容器/头/体/脚转换成表,其中#body是height: 100%.这很有效,除非#body内容变得太大而不会滚动,而是整个表格展开以显示所有内容.这不是理想的行为,因为我需要#body滚动,而不是#content它的父级.

有什么建议？

Answer 1

立即想到的唯一解决方案是 display:table-cell，尽管您遇到了 ie6 和 ie7 中缺乏支持的问题。也许提供良好浏览器的规则，以及一些计算 ie 高度差异的 JavaScript？

编辑：

这是另一种方法 - 使用 jQuery 来计算偏移量。请记住，这只是一个快速而肮脏的尝试 - 需要对浏览器进行测试，并且您需要一些简单的错误处理等，但这可能是一个起点。

不确定 javascript 是否是您想要的方式，但我看不到它是在纯 css 中完成的。

我将 id 更改为类，以便您可以拥有多个“fixedHeight”框：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>

<script>

$(function() {   
   $(".fixedHeight").each(function() {
    var head = $(this).find(".head");
    var body = $(this).find(".body");
    var foot = $(this).find(".foot");   
    body.css("margin-top", head.height()).css("margin-bottom", foot.height());      
   });   
 });


</script>

<style>

.head {
    background-color: red;
    position: absolute;
    top: 0;
    width:100%;
}
.body {
    background-color: blue;
    color: white;
    overflow: auto;
    position:absolute;
    top:0;
    bottom:0;
    width:100%;
    margin:2.5em 0;
}
.foot {
    background-color: green;    
    position: absolute;
    bottom: 0;
    width:100%;
}
.container {
    background-color: #aaa; 
    border: 10px solid orange; 
    height: 300px; 
    width: 30%;
    position: absolute;
}


</style>

</head>

<body>

<div class="container fixedHeight">
  <div class="head">
    <h1>Header Content</h1>
  </div>
  <div class="body">
    <p>Body Content</p>
    <p>Body Content</p>
    <p>Body Content</p>
    <p>Body Content</p>
    <p>Body Content</p>
    <p>Body Content</p>
  </div>
  <div class="foot">
    <p>Footer Content</p>
  </div>
</div>


</body>
</html>