CSS：页面底部的页脚与内容重叠且宽度较大

问题描述

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

这是我的页脚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;}

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

谢谢。

解决方法

对我来说，总是这样：

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] 
}

我写了一个代码片段，可以解决您的问题

  html,body{ 
    height:100%;
    margin:0;
  }
  
  header {
    height: 30px;
    background-color: #000;
    color: #fff;
    padding: 20px;
    text-align:center;
  }
  
  footer{ 
    height: 30px;
    background-color: #000;
    color: #fff;
    padding: 20px;
    text-align:center;
    margin-top: auto; 
  }
  
  body{ 
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction:column; 
  }
  
   header p,footer p{
    margin: 5px 0px;
   }

  .container{
    text-align:center;
    padding: 20px;
  }

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<header>
    <p>This is header</p>
</header>

<div class="container">
    <p>This is body content</p>
</div>

<footer>
<p>This is footer</p>
</footer>

</body>
</html>

footer layout