gpt4 book ai didi

html - 粘性页脚,但具有多个相同类别的包装器

转载 作者:太空宇宙 更新时间:2023-11-04 04:06:51 26 4
gpt4 key购买 nike

我继承了一个我不习惯的 div 布局的网站:

<html>
<body>
<div class="wrap">...</div>
<nav>...</nav>
<div class="wrap">...<!-- main stuff -->...</div>
<footer>
<div class="wrap">...</div>
</footer>
</body>
</html>

其中一个页面的内容很少,因此需要一个粘性页脚。通常我会使用类似 http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/ 的东西并在 CSS 中设置 100% 等等。

我真的不想重写网站的结构。有没有其他方法可以让页脚位于屏幕底部,同时保持这种“包装类”结构?

最佳答案

您可以先包装所有内容,然后将页脚放在包装之外

<html>
<body>
<div class="wrap-all">
<div class="wrap">...</div>
<nav>...</nav>
<div class="wrap">...<!-- main stuff -->...</div>
<footer>
<div class="wrap">...</div>
</footer>
</div>
</body>
</html>

然后是样式:

 html, body {
height: 100%;
}
.wrap-all {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.wrap-all:after {
content: "";
display: block;
}
footer {
/* .push must be the same height as footer */
height: 142px;
}

关于html - 粘性页脚,但具有多个相同类别的包装器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21231796/

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