html – CSS高度：填充可用空间.没有固定的高度

所以我有以下结构

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

我只使用ids来说明目的,所以这甚至不一定是一整页.

我想要我的容器指定一个固定的大小…或相对的大小,没关系.为了争论,说300px高.也溢出：隐藏

我想要让头/脚扩展以适应自己内容,所以height：auto是足够的.

我想要身体扩张以适应头部和脚部之间的剩余空间.如果内容太大,请滚动(overflow：auto).

高度：#body上的100％不起作用,因为它像父代一样获得300px的高度,并将其自身的一部分和页脚从父项中移出.

具有头和脚的位置：绝对不起作用,因为将它们从文档流中取出,#body的某些内容被隐藏.要修复,我们可以使用padding-top / bottom,但是我们不能在#body上设置padding-top：xxpx / padding-bottom：xxpx,因为我们不知道头/脚的必要高度,因此为什么它们是height：auto.

编辑：

我尝试将容器/头/身/脚转换成#body为height的表：100％.这样做非常好,除了#body不会滚动,如果内容太大,而不是整个表扩展为显示所有的内容.这不是我想要的行为,因为我需要#body滚动,而不是#content或它的父.

有什么建议么？

解决方法

立即想到的唯一解决方案是显示：table-cell,尽管您遇到了ie6和IE7.也许为好的浏览器提供规则,还有一些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>

html – CSS高度：填充可用空间.没有固定的高度

解决方法

相关文章