[英]Several divs to divide outer div height and fill it
我有几个div,我需要它们填充内容高度,以便每个div具有相同的高度。 它们的高度必须响应浏览器窗口的大小调整,因此无法固定。 div的数量可以在7到12之间变化。我不知道是否可以使用纯CSS做到这一点,或者是否必须使用jquery。
您必须将jQuery与以下内容配合使用:
var $yourDivs = $('div');
function update(){
var $winHeight = $(window).height();
var $divNumber = $yourDivs.length;
var $newDivHeight = ($winHeight / $divNumber);
$yourDivs.css('height', $newDivHeight + 'px');
};
但是,不要获取窗口高度,而是获取内容区域的高度。
这并没有我想的那么糟。 参见下面的代码:
的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中工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.