gpt4 book ai didi

html - 粘在页面底部的 CSS Footer

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

我尝试创建 div 页脚,但遇到问题。

我在容器中一个一个地放置了几个 div block 。容器有 100% 的高度。内部容器第一个 Div 有 100px 高度(标题)。Second Div(Mainbody)的所有高度都需要达到网站底部(屏幕尺寸的 bootom 部分)或更高。

Third Div 有绝对位置并且位于底部。但 Container Div 的摘要高度超过 100%,因为我在页面右侧看到滚动条。如何解决?

带有 css 的页面:height:100% 占用超过 100%

html, body {
height: 100%;
margin:0;
padding:0;
background-color: yellow;
}

.container {
position:relative;
min-height:100%;
background-color: green;
}

.header {
background-color: blue;
height: 100px;
}

.mainbody {
background-color: gray;
height: 100px;
}

.footer {
position:absolute;
bottom:0;
width: 100%;
background-color: red;
}
<body>
<div class="container">
<div class="header">
<p>
header
</p>
</div>
<div class="mainbody">
<p>
mainbody
</p>
</div>
<div class="footer">
<p>
footer
</p>
</div>
</div>
</body>

最佳答案

用浏览器打开。如该代码段所示,它不显示任何滚动条。设置

.container{ height:100%}

而不是

min-height:100%

因为它将超过页面的完整大小。

关于html - 粘在页面底部的 CSS Footer,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34994705/

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