gpt4 book ai didi

html - 只是不能让页脚留在底部

转载 作者:太空宇宙 更新时间:2023-11-03 23:32:57 24 4
gpt4 key购买 nike

When an HTML page contains a small amount of content, the footer can sometimes sit halfway up the page leaving a blank space underneath. This can look bad, particularly on a large screen. Web designers are often asked to push footers down to the bottom of the viewport, but it's not immediately obvious how this can be done.

我有这样的 html 结构:

<html>
<body>
<div class="wrapper">
....
</div>
<div class="footer" id="cdFooter">
.......
</div>
</body>
</html>

我试过网上说的,这样设置css规则

html,body {
position: relative;
min-height: 100%;
}

.wrapper {
min-height:100%;
position: relative;
overflow:hidden !important;
}
.footer {
bottom: 0;
width: 100%;
}

(一些其他的 css 规则你可以在下面的 URL 中看到,我不能在这里放太多代码。)

但如果您使用的是大屏幕桌面,页脚仍不会位于浏览器底部。您可以在此 URL 查看结果:http://dev.xinruima.me/readistep/

有人说,我需要将包装器设置为 margin-bottom: **px 之类的规则,但这对我的网站不起作用。

有人可以看看我的 URL 看看有没有办法很好地解决这个问题?我希望它能够响应,所以我可能不会使用固定高度来向下插入元素或类似的东西。

谢谢。

如果我使用 position: absolute,它会覆盖包装器。我也用 body {height: 100%},它对我不起作用。有人可以尝试编辑我的网址吗?

我认为问题在于,如果我们能够像 html 那样使 body 的高度 100% 与浏览器高度一样高,那么问题就解决了,希望如此。

最佳答案

您没有指定页脚的显示方式。您还需要更改 body 元素的高度:

body {
height: 100%;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
}

关于html - 只是不能让页脚留在底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24812035/

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