几个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高度并填充它

回答

相关问题