gpt4 book ai didi

css - 如何将百分比值分配给 div 以将整个页面分成 3 个部分,主体高度 = 窗口高度

转载 作者:技术小花猫 更新时间:2023-10-29 12:11:04 26 4
gpt4 key购买 nike

我想创建 3 个 div,使整个页面的大小与窗口相同(即页面不应滚动),并且每个 div 的高度应占整个高度的一定百分比。例如

|--------------------------------------|
| Body height=window's height |
| |----------------------------------| |
| | Header height:10% | |
| |----------------------------------| |
| | | |
| | Content height:85% | |
| | | |
| | | |
| |----------------------------------| |
| | Footer height:5 % | |
| |----------------------------------| |
|--------------------------------------|

这是我用过的代码,但没有成功

<body style="width: 100%; height:100%">
<div style="width: 100%; height:100%;">
<div id="headerDiv" style="width: 100%; height:10%; background-color: #ff0000">
<!-- some content -->
</div>
<div style="width: 100%; height:85%;" >
<!-- some content -->
</div>
<div style="width: 100%; height:5%" >
<!-- some content -->
</div>
</div>
</body>

最佳答案

你需要这样的东西吗?

Demo

html, body {
height: 100%;
}

div:nth-of-type(1) {
background: #f00;
height: 20%;
}

div:nth-of-type(2) {
background: #00f;
height: 70%;
}

div:nth-of-type(3) {
background: #0f0;
height: 10%;
}

我猜 your solution will also work , 但你一定错过了重置默认浏览器样式,在你的 CSS 中使用它,你也错过了为 html 元素设置 height: 100%;

* {
margin: 0;
padding: 0;
}

关于css - 如何将百分比值分配给 div 以将整个页面分成 3 个部分,主体高度 = 窗口高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16414143/

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