css - CSS：页面底部的页脚重叠内容并具有更高的宽度

Question

我希望页脚留在我的网页底部。我做到了，但是如果主要内容很长，则用户无法滚动页面；结果（我猜）是页脚与内容重叠。另一个问题是页脚的宽度大于网站的“页眉”。

这是我的页脚CSS：

#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    font-size: 0.9em;
    padding: 2em;
    background-color: orange;
    border: 0.2em #4040ff;
    margin-bottom: 1em;
    border-style: solid;}

我还上传了屏幕图像，以便向您展示图形问题。

谢谢你。

标签： csslayoutfooter

Answer 1

对我来说总是这样：

html { height: 100%; }
body {
    min-height:100%; 
    position:relative; 
    padding-bottom:[footer-height] 
}
.footer { 
    position: absolute; 
    left: 0 ; right: 0; bottom: 0; 
    height:[footer-height] 
}