gpt4 book ai didi

CSS。正文高度等于文档高度

转载 作者:行者123 更新时间:2023-11-28 02:26:03 24 4
gpt4 key购买 nike

在内容较小且 body height: 100% 的情况下,页脚被压到窗口底部,弹出一个绝对非常长的菜单(比 body height 长)会增加文档的高度,导致在页脚后的大量可用空间中。问题是主体高度此时小于文档高度。

如何使用 css 强制 body 高度跟随文档的高度。

Example on jsfiddle

body, html {
height: 100%;
padding: 0;
margin: 0;
}
.main {
border: 1px solid red;
height: 100%;
}
.ab {
left: 2em;
top: 2em;
right: 10em;
height: 150vw;
position: absolute;
border:1px solid yellow;
}
<div class="main">
<div class="ab"></div>
</div>
<style>

</style>

更新。正在寻找一个CSS解决方案。在 JS (jQuery) 上,可以这样做:

$("body").height($(document).height());

最佳答案

问题是由于 .ab 元素具有 position: absolute;。这会导致元素从文档流中取出,导致文档高度不变。

.ab 更改为 position: relative 以解决此问题,但这可能需要一些其他 HTML/布局更改。

function addElement() {

document.getElementById("ab").classList.add("show")
}
html,
body {
height: 100%;
position: relative;
padding: 0;
margin: 0;
}
.main {
border: 1px solid red;
min-height: 100%;
box-sizing: border-box;
}
#ab {
box-sizing: border-box;
width: 90vw;
margin: 30px 5vw;
height: 150vw;
position: relative;
border:1px solid yellow;
display: none;
}

#ab.show {
display: block;
}
<div class="main">
<div id="ab"></div>
<button onclick="addElement()">Add tall element</button>
</div>
<style>

</style>

关于CSS。正文高度等于文档高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47954951/

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