如何让 div 始终填充 100% 的垂直空间？我有this Fiddle，它显示了我是如何使用 jQuery 完成的，但可以使用 CSS 完成吗？
var height = $('.content').height();
$('.sidebar').height(height);
PS 我们不能在容器上设置高度，因为我们显然需要边栏随着内容填充 .content 区域而增加高度。
【问题讨论】：
好吧，根据您的小提琴，将 700px 的固定高度设置为 .sidebar 和 .content div 就足够了，我认为这不是您想要的，所以在这里您有一个自适应使用具有完全不同 CSS 的 HTML 标记的解决方案：
.wrapper {
height:100%;
overflow:hidden;
width:700px;
}
.sidebar {
background: grey;
float:left;
width: 200px;
padding-bottom:5000px;
margin-bottom:-5000px;
}
.content {
background: #AEAEAE;
position:relative;
float:right;
width:500px;
padding-bottom:5000px;
margin-bottom:-5000px;
}
footer {
clear:both;
float:none;
background: yellow;
display:block;
height:30px;
position:relative;
}
此解决方案将接受任何高度，.sidebar 和 .content 都将采用最大 div 的高度，以实现等高的列布局。但是，如果您觉得两个 div 都需要一些高度，您也可以这样做：
.sidebar, .content{min-height:700px;} /* or whatever */
See fiddle 并尝试看看它是如何工作的
【讨论】：
您的主要观点是让背景在整个高度上展开，对吗？您不关心 side-element 的“实际”高度，是吗？
在那种情况下，你可以做我在fiddle update of yours中所做的事情：
用<div class="main"> 将边栏放在一边。由于 div 总是扩展到其最大的孩子高度，因此无论视口如何，它的高度都会自动成为整个高度。现在添加以下 css 以在具有整个扩展高度的侧边框后面创建一个伪元素并为其着色。瞧，你的整个高度都有你的背景：
.main {
position: relative;
}
.main:after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 300px;
background: gray;
content: "";
z-index: -1;
}
【讨论】：
我真的迟到了，但我多次遇到这个问题，我认为在这种情况下，display: table-cell; 真的很闪耀：http://jsfiddle.net/yw6w562e/2/
另外，使用
在较小的浏览器尺寸中重新对齐它们也很容易display: table-header-group;
和
display: table-footer-group;（参见小提琴媒体查询）
【讨论】：
尝试使用：
html, body, .wrapper, .sidebar { height: 100%; }
外包装也必须定义。
【讨论】：
body { height: 100% } 是不好的做法。