gpt4 book ai didi

html - 使子元素成为 BODY 元素的 100% 高度,也是 100%

转载 作者:行者123 更新时间:2023-11-28 10:37:06 25 4
gpt4 key购买 nike

我正在尝试制作 <body>元素至少占据浏览器窗口 100% 的高度,但也可以扩展到任何内容。我也在尝试使其成为唯一的 <div>子元素占了 100% <body>高度也是如此。

插图

这就是目前正在发生的事情;案例 A 是问题所在,案例 B 按预期工作。

Example of what's happening

在案例 A 中,div.page-content (红框)应该扩展到 body (蓝框),但事实并非如此。

代码

这是我的。

CSS

html {
height: 100%;
}

body {
min-height: 100%;
padding-top: 57px;
}

.page-content {
height: 100%;
}

HTML

<html>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top"></nav>
<div class="page-content">
<div class="page-container"></div>
</div>
</body>
</html>

请注意 nav元素是静态定位的,因此不会影响布局。

主体没有 height指定是因为我希望高度为 auto所以它延伸到内容,但我不希望高度小于浏览器窗口。

正文表现符合预期,它是 div.page-content这只是根据自己的内容调整大小,而不是拉伸(stretch)到 body 的高度.

有没有办法在不使用 javascript 的情况下实现所需的行为?

最佳答案

body中添加overflow:visible;,将min-height:100%;改为height:100%; 用于 bodyheight:100%;min-height:100%; 用于 .page-content

关于html - 使子元素成为 BODY 元素的 100% 高度,也是 100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36918099/

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