Html 使用两个div填充整个垂直空间_Html_Space_Fill

Html 使用两个div填充整个垂直空间

html

Html 使用两个div填充整个垂直空间,html,space,fill,Html,Space,Fill,这似乎是一个很常见的问题，我花了几个小时试图在网上解决这个问题情况：我有两个div：div_标题，div_内容无论垂直空间div_头不占多少空间，随着浏览器大小的变化，我都需要div_内容来填充剩余空间代码：谢谢大家。编辑：被误解的操作要求：使用以下CSS： html, body { margin: 0; height: 100%; } #div_header { height: 100px; } #div_content { position: abso

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

情况：

我有两个div：div_标题，div_内容
无论垂直空间div_头不占多少空间，随着浏览器大小的变化，我都需要div_内容来填充剩余空间

代码：

谢谢大家。

编辑：被误解的操作要求：

使用以下CSS：

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

#div_header {
  height: 100px;
}

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

我不知道你是否想要JS解决方案。这是我的尝试。在我的屏幕上，若浏览器的高度下降到400px以下，那个么它会以其他方式显示scroll OK

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


函数heightDo（）
{
var headerO=document.getElementById（“div_头”）；
var contentO=document.getElementById（“div_content”）；
//var docH=document.height；
var bodH=document.body.offsetHeight；
contentO.style.height=bodH-headerO.offsetHeight；
}
html，正文{
}
#分区头
{
高度：自动；
}
#div_内容{
}
标题


你怎么说？
所容纳之物

#div_content{min height:100%；}Alex，当我尝试这样做时，高度会变成原始屏幕大小的100%。由于div_标题有一定的高度（取决于内容），网站的高度变为（div_标题+原始屏幕的100%）。有什么想法吗？诚恳地说，马塔，对不起，误解了这个问题。你能提前知道收割台的高度吗？如果是这样，就有一个纯CSS解决方案。否则，您需要JS来跨浏览器。Alex，是的，我会提前知道标题的高度（以像素为单位）。你有什么想法吗？谢谢你抽出时间。诚恳地说，MattI已经编辑使用绝对位置和上/下尺寸。老实说，你可能会考虑一个不同的结构（内容div中的头div，它是100%的高度和相对位置）。这里是CSS版本的HTML，体{}} div页眉{高度：15%；} div内容{{高度：85%；} }包装器{高度：100%；}标题< BR/>您说什么？内容我不知道什么坏了，但编辑答案花了很长时间，但没有成功。我要给你的javascript解决方案一个机会。我将发回它的工作原理。我尝试了css解决方案，但我忘了提到div_标题必须保持与浏览器大小更改相同的高度。谢谢你给我的时间。老实说，MattAnubhav，javascript非常接近。我现在只需要div_内容随着浏览器大小的变化而扩展。现在，一旦创建了它，它的大小将保持与浏览器更改大小相同。思想？真的，马特

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