我想在不更改页面布局结构的情况下在底部div上保留全宽背景。以下代码使我具有完整的背景色（深紫色），就像我想要的那样here。但是，当我检查手机上的页面时，我看到底部上升到9999px。如果我输入overflow: hidden，则不会获得全角背景。请帮忙，谢谢！！
.nextpage {
color: #FFF;
background: #2D0072;
width: 100%;
height: 120px;
text-align: center;
padding: 33px 5px;
display: block;
position: relative;
}
.nextpage:before, .nextpage:after {
content: "";
position: absolute;
background-color: #2D0072;
top: 0;
bottom: 0;
width: 9999px;
}
.nextpage:before {
right: 100%;
}
.nextpage:after {
left: 100%;
}
最佳答案
当然，解决此问题的最佳方法是安排布局HTML ...
<body>
<header>
<div class="page-width">
// header stuff here
</div>
</header>
<content>
<div class="page-width">
// main content stuff here
</div>
</content>
<footer>
<div class="page-width">
// footer stuff here
</div>
</footer>
</body>
然后是CSS ...
body {
display: flex;
}
content {
flex: 1;
}
.page-width {
margin: 0 auto; // centers your block element if smaller that it's parent
max-width: 1200px; // you decide
}
但是你不能改变你的布局？您将不得不做一些黑客...
的CSS
footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
}
stuff-in-footer {
margin: 0 auto; // for centering
max-width: 1200px; // you decide
}
黑客需要在页面的其余部分上留一个底边，以便在完全滚动时可以看到它。同样，无论页面的滚动位置如何，“固定”都将把页脚放置在页面底部，因为CSS上面写着。可能需要一些JS才能根据页脚的显示高度在内容上应用右下边距，并且需要更多的JS才能在页面完全滚动时显示页脚。