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

【问题标题】：CSS: Footer at the bottom of the page overlapping content and with higher widthCSS：页面底部的页脚重叠内容并具有更高的宽度
【发布时间】：2020-12-09 23:49:13
【问题描述】：

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

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

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

谢谢。

【问题讨论】：

标签： css layout footer

【解决方案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] 
}

【讨论】：

【解决方案2】：

我写了一段代码sn-p，可以解决你的问题

  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>

【讨论】：