幾個div划分外部div高度並填充它

Question

我有幾個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

Answer 1

您必須將jQuery與以下內容配合使用：

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

但是，不要獲取窗口高度，而是獲取內容區域的高度。

Answer 2

這並沒有我想的那么糟。 參見下面的代碼：

的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的高度和頂部位置。 據在評論這個問題，它不會在IE8的工作，但我沒有測試，在目前的方式。 確認可以在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