Html CSS 高度：填充可用空间。没有固定高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3153533/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Height: Fill available space. No fixed heights
提问by Dmitriy Likhten
So i have the following structure
所以我有以下结构
<div id="container">
<div id="head"></div>
<div id="body"></div>
<div id="foot"></div>
</div>
I am only using the ids for illustration purposes so this is not even necessarily for a full page.
我仅将 id 用于说明目的，因此这甚至不一定适用于整页。
I want my container to specify a fixed size... or a relative size, does not matter. Lets for argument sake say 300px height. Also overflow: hidden
我希望我的容器指定一个固定大小...或相对大小，这无关紧要。让我们为争论起见说 300px 高度。还overflow: hidden
I want head/foot to expand to fit the content within itself, so height: autois sufficient.
我希望头部/脚部扩展以适应其内部的内容，这样height: auto就足够了。
I want the body to expand to fit the remaining space in between head and foot. If the content is too big, then scroll (overflow: auto).
我想让身体膨胀以适应头部和脚部之间的剩余空间。如果内容太大，则滚动 ( overflow: auto)。
height: 100%on #bodydoes not work because then it gains the height of 300px like the parent and pushes part of itself and the footer out of the parent.
height: 100%on#body不起作用，因为它会像父级一样获得 300px 的高度，并将自身的一部分和页脚推出父级。
Having head and foot position: absolutedoes not work because by taking them out of the document flow, some content of #bodyis hidden. To fix that we can use padding-top/bottom but we can't set a padding-top: xxpx/padding-bottom: xxpxon the #bodybecause we don't know the necessary height of the head/foot hence why they are height: auto.
有头有脚position: absolute是行不通的，因为通过将它们从文档流中取出，#body隐藏了一些内容。为了解决这个问题，我们可以使用 padding-top/bottom 但我们不能在 the 上设置padding-top: xxpx/因为我们不知道头/脚的必要高度，因此为什么它们是.padding-bottom: xxpx#bodyheight: auto
Edit:
编辑：
I tried converting the container/head/body/foot into a table where the #bodyis height: 100%. This works great except that #bodywon't scroll if the content gets too big, instead the entire table expands to show all content. This is not the desired behavior as I need #bodyto scroll, not #contentor it's parent.
我尝试将容器/头/身体/脚转换成一个表，其中#bodyis height: 100%。这很好用，只是#body如果内容太大则不会滚动，而是整个表格扩展以显示所有内容。这不是所需的行为，因为我需要#body滚动，而不是#content它的父级。
Any suggestions?
有什么建议？
采纳答案by DHuntrods
The only solution that immediately comes to mind is display:table-cell, though you run into the problem of lack of support in ie6 & ie7. Perhaps providing the rule for good browsers, and some javascript to calculate differences in height for ie?
立即想到的唯一解决方案是 display:table-cell，尽管您遇到了 ie6 和 ie7 缺乏支持的问题。也许为好的浏览器提供规则，以及一些 javascript 来计算 ie 的高度差异？
Edit:
编辑：
Here's another approach - using jQuery to calculate the offset. Bear in mind this is just a quick & dirty attempt - it would need to be browser tested and you'd want some simple error handling etc., but it could be a starting point.
这是另一种方法 - 使用 jQuery 计算偏移量。请记住，这只是一个快速而肮脏的尝试 - 它需要经过浏览器测试，并且您需要一些简单的错误处理等，但这可能是一个起点。
Not sure if javascript is the way you want to go but I can't see it being done in pure css.
不确定 javascript 是否是您想要的方式，但我看不到它是在纯 css 中完成的。
I changed the ids to classes so that you can have multiple 'fixedHeight' boxes:
我将 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>
回答by Dmitriy Likhten
Ok so heres a bit of research I got through to sort-of get this working.
好的，所以我进行了一些研究，以使其能够正常工作。
#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;
}
This assumes I can calculate the sizes of #headand #footand set the total size to the padding of the appropriate location of #body. This will push the content of body out of the area which #head/#foot occupy due to their absolute positioning. The problem here is that the scroll bar winds up being cut off partially on the top/bottom because only the content is shifted, the scroll bar is not.
这假设我可以计算 和 的大小#head并将#foot总大小设置为#body. 由于它们的绝对定位，这会将 body 的内容推出 #head/#foot 占据的区域。这里的问题是滚动条在顶部/底部被部分切断，因为只有内容被移动，滚动条没有。
For width, this is not really an issue.
对于宽度，这不是真正的问题。
回答by mightybyte
I recently ran into this issue in a situation where I also did not know the total height of the container (like Dmitriy's answer assumes). Let's say the height of #headand #footare 50 and 25 respectively. Here's how I solved it:
我最近遇到了这个问题，我也不知道容器的总高度（就像 Dmitriy 的回答假设的那样）。假设#head和的高度#foot分别为 50 和 25。这是我解决它的方法：
#body {
top: 25px;
bottom: 50px;
position: absolute;
}
#foot {
position: absolute;
bottom: 0;
}
