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%上的{p> #body不起作用，因为它会像父母一样获得300px的高度，并将部分内容和页脚推出父级。

头部和脚部position: absolute不起作用，因为将它们从文档流中取出后，隐藏了#body的某些内容。要解决此问题，我们可以使用padding-top / bottom但我们无法在padding-top: xxpx上设置padding-bottom: xxpx / #body，因为我们不知道头/脚的必要高度因此他们为height: auto。

编辑：

我尝试将容器/头部/身体/脚转换为#body为height: 100%的表格。除非#body在内容过大时不会滚动，而是整个表格展开以显示所有内容，否则这种方法效果很好。这不是理想的行为，因为我需要#body来滚动，而不是#content或它的父级。

有什么建议吗？

Answer 1

立即想到的唯一解决方案是显示：table-cell，尽管你遇到了ie6＆amp; amp;中缺乏支持的问题。 IE7。也许为优秀的浏览器提供规则，并使用一些javascript来计算ie的高度差异？

编辑：

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

不确定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>

Answer 2

好的，所以我接受了一些研究，以帮助实现这一目标。

#head {
    background-color: red;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
#body {
    background-color: blue;
    color: white;
    border: 0 none;
    overflow: auto;
    height: 100%;
    padding-top: 2.5em;
    padding-bottom: 2.5em;
    box-sizing: border-box; 
    webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
}
#foot {
    background-color: green;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}
#container {
    background-color: #aaa; 
    border: 10px solid orange; 
    height: 300px; 
    width: 30%;
    overflow: show;
    position: absolute;
}

这假设我可以计算#head和#foot的大小，并将总大小设置为#body的适当位置的填充。由于它们的绝对定位，这将把身体的内容推出#head / #foot占据的区域。这里的问题是滚动条会在顶部/底部部分被切断，因为只有内容被移动，滚动条不会。

对于宽度，这不是一个真正的问题。

Answer 3

我最近遇到了这个问题，我也不知道容器的总高度（就像Dmitriy的答案所假设的那样）。假设#head和#foot的高度分别为50和25。这就是我解决它的方法：

#body {
  top: 25px;
  bottom: 50px;
  position: absolute;
}

#foot {
  position: absolute;
  bottom: 0;
}

CSS高度：填充可用空间。没有固定的高度

3 个答案: