css 页脚HTML未附加到底部

egdjgwm8 于 2023-02-01 发布在其他

关注(0)|答案(2)|浏览(166)

这有点奇怪。在我的2个HTML页面中，我有一个页脚，等于两者，但在一个，这是短于其他，页脚去了，并在底部留下一个像30px的空间。（在较长的页面页脚保持附着在底部）
下面是页脚和正文的css：

footer{
    background-color: #0b2239;
    position: absolute;
    width: 100%;
}

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

我尝试通过添加bottom: 0;来解决此问题，但在较长的页面中，页脚覆盖了页面中的其他元素

2条答案

您只需要将值bottom: 0;添加到footer

footer{
    background-color: #0b2239;
    position: absolute;
    width: 100%;
    bottom: 0;
}

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

这可能是由于两页的内容长度不同造成的。页面越短，内容越少，这会导致页脚在页面上的位置越高。若要解决此问题，可以将页脚位置设置为相对位置而不是绝对位置，然后添加与页脚高度相等的底部填充。