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

我有幾個div，我需要它們來填充內容高度，以便每個div具有相同的高度。它們的高度必須響應瀏覽器窗口大小調整，因此無法修復。 div的數量可以在7和12之間變化。我不知道這是否可以用純css來完成，否則必須涉及jquery。幾個div來劃分外部div高度並填充它

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

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

來源

2013-01-31 woopata

它可以用純HTML和CSS完成，但它會很混亂。給我幾分鐘。 –

這並沒有我想象的那麼糟糕。請參見下面的代碼：

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開始）。根據對this問題的評論，它在IE8中不起作用，但我目前無法測試該問題。已確認在IE9，IE9兼容模式，Chrome 24和FF 18下工作。

來源

2013-01-31 17:01:26

您必須使用jQuery像這樣的東西：

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

而是獲得了窗口高度，得到的高度您的內容區域。

來源

2013-01-31 16:36:40 dezman

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

回答

相關問題