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

所以我有以下结构CSS高度：填充可用空间。没有固定的高度

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

我只使用插图的IDS

所以这甚至不需要一个完整的页面。

我想我的容器指定一个固定的大小...或相对大小，无所谓。让参数为300px高度。也overflow: hidden

我想扩大头/脚以适应其内的内容，所以height: auto就足够了。

我想要身体扩大以适应头部和脚之间的剩余空间。如果内容太大，请滚动（overflow: auto）。

height: 100%#body不起作用，因为它然后获得300像父亲一样的高度，并将其本身和页脚的一部分推出父母。

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

编辑：

我尝试了容器/头/体/脚转换成表，其中#body是height: 100%。这很有效，但如果内容太大，#body将不会滚动，而是整个表将展开以显示所有内容。这不是所需的行为，因为我需要#body来滚动，而不是#content或它的父母。

有什么建议吗？

来源

2010-06-30 Dmitriy Likhten

你想设置身体的背景，以适应头部和脚之间？ – galambalazs 2010-06-30 21:46:06

你可以通过将#container视为＃body的背部，来“伪装”你想要完成的任何事情的外观。你也可以抛出一个额外的父元素，如果＃容器不能嘲笑。取决于你在做什么，完全是。 – reisio 2010-06-30 22:41:10

@reisio：不能。问题是我想要脚在底部，头部在顶部，身体要填充空间。我不介意使用#container作为#body的背景，但问题在于制作头部/脚部位置和正文滚动。它的内容比背景颜色更多。 – 2010-07-02 14:39:16

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

编辑：

这里的另一种方法 - 使用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>

来源

2010-06-30 21:41:12 DHuntrods

ie7支持是必要的。什么dos显示：表格单元暗示？表格单元是否占用了它父母的尽可能多的空间？ – 2010-07-01 00:31:13

此解决方案不起作用。为了让它正确显示，我需要一个带有'display：table'的父div，但是一个表似乎并不尊重height属性。所以如果我把表格的“高度”设置为300px，只要有必要，它就会展开。即使使用“最大高度”，它也不尊重它。我试着用'display：table-row'和body作为'display：table-cell'和container作为'display：table'，并且它的工作原理非常完美，直到我需要body来滚动它刚开始生长的时候。 – 2010-07-01 17:57:21

当然 - 桌子上的高度总是意味着最小高度！也许如果你为你想要做的事情提供了一些额外的上下文和内容？我不确定这种精确的安排可以纯粹在CSS中完成，但也许有其他方法可以解决问题？ – DHuntrods 2010-07-01 19:26:57

确定这样继承人一点研究，我拨通了排序的得到这个工作。

#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适当位置的填充。这会将身体的内容推出＃头/＃脚所占据的区域，因为它们的绝对定位。这里的问题在于，由于只有内容被移动，所以滚动条没有被顶部/底部部分地切断。

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

来源

2010-07-02 18:14:10

我最近遇到这个问题，我也不知道容器的总高度（就像德米特里的答案所假设的那样）。假设#head和#foot的高度分别是50和25。以下是我如何解决它：

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

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

来源

2015-09-25 21:23:42 mightybyte

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

回答

相关问题