gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-31 08:47:31 25 4
gpt4 key购买 nike

我有几个 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%;
}

(borders for visual reference only) 根据div的个数调整div的高度和顶部位置(100%/div个​​数,从0开始)。根据对 this 的评论问题,它在 IE8 中不起作用,但我目前无法对其进行测试。已确认在 IE9、具有兼容模式的 IE9、Chrome 24 和 FF 18 中工作。

关于jquery - 几个div来划分外部div高度并填充它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14630583/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com