几个div来划分外部div高度并填充它答案

【问题标题】：Several divs to divide outer div height and fill it几个div来划分外部div高度并填充它
【发布时间】：2013-01-15 20:06:21
【问题描述】：

我有几个 div，我需要它们来填充内容高度，以便每个 div 具有相同的高度。它们的高度必须响应浏览器窗口的大小调整，因此无法修复。 div 的数量可以在 7 到 12 之间变化。我不知道这是否可以用纯css或jquery来完成。

之前：
original divs http://imageshack.us/a/img14/9964/23446096.jpg

之后：
resized divs http://imageshack.us/a/img42/9183/76164750.jpg

【问题讨论】：

可以用纯 HTML 和 CSS 来完成，但是会很乱。给我几分钟。

标签： jquery css html height

【解决方案1】：

这并没有我想象的那么糟糕。见以下代码：

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 的数量（100% / div 的数量，从 0 开始）调整 div 的高度和顶部位置。根据this 问题的评论，它在 IE8 中不起作用，但我目前无法测试它。确认可在 IE9、具有兼容模式的 IE9、Chrome 24 和 FF 18 中运行。

【讨论】：

【解决方案2】：

你必须使用 jQuery 来做这样的事情：

var $yourDivs = $('div');
function update(){
    var $winHeight = $(window).height();
    var $divNumber = $yourDivs.length;
    var $newDivHeight = ($winHeight / $divNumber);
    $yourDivs.css('height', $newDivHeight + 'px');
};

但不是获取窗口高度，而是获取内容区域的高度。

【讨论】：