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

2023年5月15日 155次阅读

我有几个div,我需要它们来填充内容高度,以便每个div具有相同的高度.它们的高度必须响应浏览器窗口的大小调整,因此无法修复. div的数量可以在7到12之间变化.

我不知道这是否可以用纯css完成,或者必须涉及
jquery.

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

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

最佳答案 这并不像我想象的那么糟糕.见下面的代码：

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下工作.

点赞