您可以选择：
或者
您自己决定 :)
min-height: nn; flex-grow: 1;是完全可行的。 - JESii如果您正在使用jQuery，有一种方法可以实现这一点。由于您要求使用CSS，这可能不是您可用的选项，但如果您能够利用它，它将完全符合您的要求。
$(divToResize).css('height',$(container).innerHeight());
$(divToResize) 是您想要匹配其容器高度的 DIV 的选择器，$(container) 则是您想要获取其高度的容器。
无论容器的高度是否在 CSS 中指定，此方法都适用。
我知道这个问题很久以前就有答案了，但是现在我遇到这个问题时，我使用Flex Box。它非常棒。请参考Chris Coyier的完整指南。
.parent {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 100%;
}
.child {
flex-grow: 1;
}
.child1 {
min-height: 200px;
background-color: #fee;
}
.child2 {
background-color:#eef;
}<div class="parent">
<div class="child child1">Child 1</div>
<div class="child child2">Child 2</div>
</div>
Flexbox Layout（弹性盒子）模块旨在提供一种更有效的方式来布局、对齐和分配容器中的项目之间的空间，即使它们的大小未知和/或动态（因此是“flex”一词）。弹性布局的主要思想是赋予容器改变其项目的宽度/高度（和顺序）以最佳填充可用空间的能力（主要是为了适应各种显示设备和屏幕尺寸）。弹性容器扩展项目以填充可用的自由空间，或缩小它们以防止溢出。
最重要的是，与常规布局（垂直基础的块级布局和水平基础的行内布局）相比，弹性盒子布局不受方向限制。虽然这些布局对于页面很有效，但它们缺乏灵活性（没有双关语意味），无法支持大型或复杂的应用程序（特别是在方向更改、调整大小、拉伸、收缩等方面）。
如果我的理解是正确的，没有指定高度的div的默认高度是自动的，那么在不设置包含div的显式高度的情况下，这是不可能实现的。如果在包含div上设置了显式高度，则包含的div上的height:100%将意味着它会增长到容器的高度。
<body>
<div id="wrap">
<div id="header">
<h1>
My Header</h1>
</div>
<div id="main">
<ul id="nav">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
<div id="primaryContent">
</div>
</div>
<div id="footer">
<h1>
My Footer</h1>
</div>
</div>
CSS（层叠样式表）
#wrap
{
width: 800px;
margin: auto;
}
#header
{
background: red;
}
#main
{
display: table;
}
#nav
{
background: gray;
width: 150px;
display: table-cell;
}
#primaryContent
{
background: yellow;
padding: 0 .5em;
display: table-cell;
}
解决IE的问题
#wrap
{
width: 800px;
margin: auto;
}
#header, #footer
{
background: red;
}
#main
{
background: url(../bg.png) repeat-y;
}
#nav
{
background: gray;
width: 150px;
float: left;
}
#primaryContent
{
background: yellow;
margin-left: 150px;
padding: 0 .5em;
}
.container{padding-top:100px;padding-bottom:50px}header
示例代码，你需要从HTML元素开始，这样你就可以利用容器中的灵活高度。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>100% Test</title>
<style type="text/css">
html, body, #inner { height: 100% }
#inner { border: 4px blue solid }
#container { height: 200px; border: 4px red solid }
</style>
</head>
<body>
<div id="container">
<div id="inner">
lorem ipsum
</div>
</div>
</body>
</html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
.container{
position:relative;
background-color:#999;
}
#to-be-sized{
position:absolute;
top:0;
height:100%;
background-color:#ddd;
}
</style>
<body>
<div class='container'>
<br>
<div style='display: block; height: 500px'>left</div>
<br>
<div id='to-be-sized' >right</div><br>
</div>
</body>
</html>