Question

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

情况：

我有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>

谢谢你们。

Answer 1

编辑：误解了OP要求：

使用以下CSS：

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

#div_header {
  height: 100px;
}

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

Answer 2

我不知道你是否想要JS解决方案。这是我的尝试。在我的屏幕上，如果浏览器的高度低于400px，那么它显示其他方式滚动它是可以的。

<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>

获得两个div来填充整个垂直空间

2 个答案: