CSS：页面底部的页脚重叠内容并具有更高的宽度
Posted
技术标签:
【中文标题】CSS：页面底部的页脚重叠内容并具有更高的宽度【英文标题】：CSS: Footer at the bottom of the page overlapping content and with higher width 【发布时间】：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;
我还上传了屏幕图像，以便向您展示图形问题。
谢谢。
【问题讨论】：
【参考方案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>【讨论】：
以上是关于CSS：页面底部的页脚重叠内容并具有更高的宽度的主要内容，如果未能解决你的问题，请参考以下文章