我有几个div，我需要它们来填充内容高度，以便每个div具有相同的高度。它们的高度必须响应浏览器窗口大小调整，因此无法修复。div 的数量可以在 7 到 12 之间变化。我不知道这是否可以用纯 css 完成，或者必须涉及 jquery。
以前：
原始div http://imageshack.us/a/img14/9964/23446096.jpg
后：
调整大小的div http://imageshack.us/a/img42/9183/76164750.jpg
这并不像我想象的那么糟糕。请参阅下面的代码：
.HTML
<html>
<head>
<title>Test divs</title>
</head>
<body>
<div id="header">Head</div>
<div id="content">
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
<div id="div4">Div 4</div>
<div id="div5">Div 5</div>
</div>
<div id="footer">Footer</div>
</body>
.CSS
body, html {
height: 100%;
}
body, body * {
margin: 0;
padding: 0;
}
#header, #content, #footer, #div1, #div2, #div3, #div4, #div5 {
border: 1px solid black;
}
#content {
position: relative;
height: 80%;
}
#div1, #div2, #div3, #div4, #div5 {
position: absolute;
right: 0;
height: 20%;
width: 150px;
}
#div1 {
top: 0;
}
#div2 {
top: 20%;
}
#div3 {
top: 40%;
}
#div4 {
top: 60%;
}
#div5 {
top: 80%;
}
边框仅供视觉参考）根据div 的数量调整div 的高度和顶部位置（100%/div 数量，从 0 开始）。根据对这个问题的评论，它在IE8中不起作用，但我目前无法对其进行测试。确认在IE9，兼容模式IE9，Chrome 24和FF 18中工作。
你必须将 jQuery 与这样的东西一起使用：
var $yourDivs = $('div');
function update(){
var $winHeight = $(window).height();
var $divNumber = $yourDivs.length;
var $newDivHeight = ($winHeight / $divNumber);
$yourDivs.css('height', $newDivHeight + 'px');
};
但是，获取内容区域的高度不是获取窗口高度。