+--------------------+
| |
| |
| |
| |
| 1 |
| |
| |
| |
| |
+--------------------+
| |
| |
| |
| |
| 2 |
| |
| |
| |
| |
+--------------------+
如上所示的（1）的内容是未知的，因为它可以在动态生成的页面中增加或减少。如上所示的第二个div（2）应填充剩余空间。
这是我的HTML的一个例子
<div id="full">
<!--contents of 1 -->
<div id="someid">
<!--contents of 2 -->
</div>
</div>
三网融合
#full{width: 300px; background-color: red;}
#someid{height: 100%;}
或者这种方法错了吗？我该怎么做？请看我的demo并告诉我我的错误。
如果你添加一个div（下面的#header）来包装你的内容1，你应该能够这样做。
#header，来自#someid的内容将被迫绕过它。#header的宽度设置为100％。这将使它扩展以填充包含div的宽度#full。这将有效地推动所有#someid的内容低于#header，因为没有空间可以绕过两侧了。#someid的高度设置为100％，这将使其与#full的高度相同。HTML
<div id="full">
<div id="header">Contents of 1</div>
<div id="someid">Contents of 2</div>
</div>
CSS
html, body, #full, #someid {
height: 100%;
}
#header {
float: left;
width: 100%;
}
更新
我认为值得一提的是，今天的现代浏览器都支持flexbox。如果#full成为弹性容器，CSS可能会被改变，而#someid应该将它的flex增长到大于0的值。
html, body, #full {
height: 100%;
}
#full {
display: flex;
flex-direction: column;
}
#someid {
flex-grow: 1;
}
要在页面上将div设置为100％高度，您需要将div上方层次结构上的每个对象设置为100％。例如：
html { height:100%; }
body { height:100%; }
#full { height: 100%; }
#someid { height: 100%; }
虽然我无法完全理解你的问题，但我认为这就是你的意思。
这是我工作的例子：
<html style="height:100%">
<body style="height:100%">
<div style="height:100%; width: 300px;">
<div style="height:100%; background:blue;">
</div>
</div>
</body>
</html>
Style只是我没有外化的CSS的替代品。
这可以通过表格来完成：
<table cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr height="0%"><td>
<div id="full">
<!--contents of 1 -->
</div>
</td></tr>
<tr><td>
<div id="someid">
<!--contents of 2 -->
</div>
</td></tr>
</table>
然后应用css使someid填充剩余的空间：
#someid {
height: 100%;
}
现在，我可以听到人群中愤怒的叫喊声，“哦，不，他正在使用桌子！把他喂给狮子！”请听我说
与接受的答案不同，除了使容器划分页面的整个高度之外什么也没有做完，这个解决方案使得div＃2按照问题中的要求填充剩余的空间。如果您需要第二个div来填充分配给它的全部高度，这是目前唯一的方法。
但是当然可以随意证明我的错！ CSS总是更好。
html,
body {
height: 100%;
}
.parent {
display: flex;
flex-flow:column;
height: 100%;
background: white;
}
.child-top {
flex: 0 1 auto;
background: pink;
}
.child-bottom {
flex: 1 1 auto;
background: green;
} <div class="parent">
<div class="child-top">
This child has just a bit of content
</div>
<div class="child-bottom">
And this one fills the rest
</div>
</div>我知道这是一个迟到的条目，但即使在2016年，我对完全缺乏IE支持flex感到惊讶（目前11是唯一一个支持它和它在http://caniuse.com/#feat=flexbox的主要错误），从商业角度来看，这不是很好！所以我认为，直到IE关闭最佳解决方案和大多数跨浏览器友好的一个肯定必须是JS / Jquery一个？
大多数网站已经使用Jquery，一个非常简单的例子（对于我的代码）是：
$('#auto_height_item').height($(window).height() - $('#header').height());
你可以明显地替换窗口和标题，让基本的数学工作。就我个人而言，我仍然不相信flex ...
我为太短的页面添加了这个。
HTML：
<section id="secondary-foot"></section>
CSS：
section#secondary-foot {
height: 100%;
background-color: #000000;
position: fixed;
width: 100%;
}
创建一个包含div（full和someid）的div，并将该div的高度设置为以下值：
身高：100vh;
包含div的高度（full和someid）应设置为“auto”。就这样。
我知道这是一个老问题，但现在有一个超级简单的形式来做，这是CCS Grid，所以让我把div作为例子：
<div id="full">
<div id="header">Contents of 1</div>
<div id="someid">Contents of 2</div>
</div>
那么CSS代码：
.full{
width:/*the width you need*/;
height:/*the height you need*/;
display:grid;
grid-template-rows: minmax(100px,auto) 1fr;
}
就是这样，第二排，scilicet，一些，将由于属性1fr而占据剩余的高度，并且第一个div将具有100px的最小值和所需的最大值。
我必须说CSS已经取得了很大进步，使程序员的生活变得更轻松。