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

Question

I have several divs and i need them to fill content height so that every div has the same height. 我有几个div，我需要它们填充内容高度，以便每个div具有相同的高度。 Their height must respond to browser window resizing, so it can't be fixed. 它们的高度必须响应浏览器窗口的大小调整，因此无法固定。 Number of divs can vary between 7 and 12. I don't know if this can be done with pure css or jquery must be involved. div的数量可以在7到12之间变化。我不知道是否可以使用纯CSS做到这一点，或者是否必须使用jquery。

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

After: 后：
resized divs http://imageshack.us/a/img42/9183/76164750.jpg 调整大小的div http://imageshack.us/a/img42/9183/76164750.jpg

Answer 1

You must use jQuery with something like this: 您必须将jQuery与以下内容配合使用：

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

But instead of getting the window height, get the height of your content area. 但是，不要获取窗口高度，而是获取内容区域的高度。

Answer 2

This wasn't nearly as bad as I thought. 这并没有我想的那么糟。 See code below: 参见下面的代码：

HTML 的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 的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%;
}

(Borders for visual reference only) Adjust the height and top positions of the divs according to how many divs there are (100% / number of divs, starting from 0). （仅用于视觉参考的边框）根据div的数量（100％/ div的数量，从0开始）调整div的高度和顶部位置。 According to a comment on this question, it doesn't work in IE8, but I have no way of testing that at the moment. 据在评论这个问题，它不会在IE8的工作，但我没有测试，在目前的方式。 Confirmed working in IE9, IE9 with Compatibility Mode, Chrome 24, and FF 18. 确认可以在IE9，具有兼容模式的IE9，Chrome 24和FF 18中工作。

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

问题描述

2 个解决方案

解决方案1
1 2013-01-31 16:36:40

解决方案2
1 已采纳 2013-01-31 17:01:26

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

问题描述

2 个解决方案

解决方案1 1 2013-01-31 16:36:40

解决方案2 1 已采纳 2013-01-31 17:01:26

解决方案1
1 2013-01-31 16:36:40

解决方案2
1 已采纳 2013-01-31 17:01:26