让两个 div 填充整个垂直空间答案

【问题标题】：getting two divs to fill entire vertical space让两个 div 填充整个垂直空间
【发布时间】：2011-07-19 06:58:47
【问题描述】：

这似乎是一个常见的问题，我花了几个小时试图在网上解决这个问题..

情况：

我有 2 个 div：div_header、div_content
无论 div_header 不占用多少垂直空间，我都需要 div_content 来填充剩余空间，随着浏览器大小的变化

代码：

<html>
<head> 
</head>

<body>

<div id = "div_header">             
</div>

<div id="div_content">
</div>

</body>
</html>

谢谢大家。

【问题讨论】：

#div_content { 最小高度：100%； }

标签： html space fill

【解决方案1】：

我不知道你是否想要 JS 解决方案。这是我的尝试。在我的屏幕上，如果浏览器的高度低于 400 像素，那么它会显示滚动，否则没关系。

<html>
<head> 
<script type="text/javascript">

function heightDo()
{

var headerO = document.getElementById("div_header");
var contentO = document.getElementById("div_content");
//var docH = document.height;
var bodH = document.body.offsetHeight;
contentO.style.height = bodH - headerO.offsetHeight;
}
</script>
<style type="text/css">
html, body {
}
#div_header
{
height:auto;


}
#div_content { 


}
</style>
</head>

<body onload="heightDo()">

<div id="div_header">  
header           
<br/>
What do you say?
</div>

<div id="div_content">
content
</div>

</body>
</html>

【讨论】：

这里只有css版本

标题
你说什么？

内容
我不知道出了什么问题，但是编辑答案花了很长时间没有成功
Anubhav，我要试一试你的 JavaScript 解决方案。将发布它是如何工作的。我尝试了 css 解决方案，但我忘了提到 div_header 必须保持与浏览器大小变化相同的高度。谢谢你给我的时间。此致，马特
Anubhav，javascript 是如此接近。我现在只需要 div_content 随着浏览器改变大小而扩展。现在，一旦它被创建，它的大小会随着浏览器的大小变化而保持不变。想法？此致，马特

【解决方案2】：

编辑：误解了 OP 要求：

使用以下 CSS：

html, body {
  margin: 0;
  height: 100%;
}

#div_header {
  height: 100px;
}

#div_content
{
  position: absolute;
  top: 100px;
  bottom: 0px;
  width: 100%;
}

【讨论】：

Alex，当我尝试这样做时，高度变为原始屏幕尺寸的 100%。由于 div_header 有一些高度（取决于内容），因此网站的高度为（div_header + 原始屏幕的 100%）。有任何想法吗？此致，马特
啊，对不起，误解了这个问题。你会提前知道头部的高度吗？如果是这样，有一个纯 CSS 解决方案。否则，你需要JS是跨浏览器的。
Alex，是的，我会提前知道标题的高度（以像素为单位）。你有什么想法？感谢您到目前为止的时间。此致，马特
我已经编辑使用绝对位置和顶部/底部来调整大小。老实说，您可能会考虑另一种结构（标题 div inside 内容 div，它是 100% 高度和相对定位的）。