在我的 html 中，我有一个分类为“页脚”的 div。我希望它有一个到 #000 的 bg 并占据整个页面宽度，并且在它之后不留空白。
我目前正在使用这个 CSS：
.footer {
color: #fff;
clear: both;
margin: 0em 0em 0em 0em;
padding: 0.75em 0.75em;
background: #000;
position: relative;
top: 490px;
border-top: 1px solid #000;
}
但是整个页面宽度没有被这个 css 代码填充。
有什么帮助吗？谢谢！
【问题讨论】：
width:100% 也许？哦，你也可以使用margin:0em;而不是设置四个值。
我使用粘性页脚：http://ryanfait.com/sticky-footer/
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
* {
margin: 0;
}
html,
body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px;
/* the bottom margin is the negative value of the footer's height */
}
.footer,
.push {
height: 142px;
/* .push must be the same height as .footer */
}<div class='wrapper'>
body goes here
<div class='push'></div>
</div>
<div class='footer'>Footer!</div>基本上，包装器是 100% 高度，页脚高度为负边距，确保页脚始终位于底部而不会导致滚动。
这应该可以实现您的目标，即拥有 100% 宽度的页脚和更窄的主体，因为 div 是块级元素，默认情况下它们的宽度是其父级的 100%。请记住，此处的页脚不包含在包装 div 中。
【讨论】：
您可以像这样将页脚 div 设为页面的绝对值：
.footer {
position:absolute;
bottom:0px;
width: 100%;
margin: 0;
background-color: #000;
height: 100px;/* or however high you would like */
}
【讨论】：
DIV 在页面底部为页脚创建一个间隙，因此它不会重叠。
我为网页的每个部分使用了一些 DIV 元素。
<div id="tplBody">
<div id="tplHeader">
...
</div>
<div id="tplContent">
...
</div>
<div id="tplFooter">
...
</div>
</div>
每个部分都是相对定位的。使用包装DIVs，我可以将包装器设置为特定宽度，其中的元素可以是100% 宽度。
我建议您避免使用绝对定位和浮动，因为它们会产生兼容性问题，因此可能无法在所有浏览器上正确显示。
【讨论】：
【讨论】：
我很高兴大家提供的支持，这些回复中的每一个都以某种方式帮助了我。我来到了这段代码：
.footer {
height: 59px;
margin: 0 auto;
color: #fff;
clear: both;
padding: 2em 2em;
background: #000;
position: relative;
top: 508px;
}
谢谢！
【讨论】：
当我使用 Bootstrap 菜单和固定页脚（无论浏览器分辨率如何）启动 Web 应用程序时，我遇到了这个问题。
为页脚元素使用以下样式
内嵌样式
在Div中使用类属性的外部样式表
<div class="footer"></div>
style.css
.footer
{
backgroud-color:black;
position:fixed;
bottom:0;
height:2%;
}
在Div中使用id属性的外部样式表
<div id="divfooter"></div>
style.css
#divfooter
{
backgroud-color:black;
position:fixed;
bottom:0;
height:2%;
}
【讨论】：
您可以在 CSS 中使用这些样式来实现您的目标
.footer{
background-color: #000;
min-width: 100%;
height: 100px;
bottom:0;
position: fixed;
}
如果您使用引导程序，请尝试使用 margin-left: -15px 和 margin-right:-15px 但在大多数情况下，当您拥有自己的类时，这不是必需的。
【讨论】：
html:
<div class="footer">
<p>
Some text comes here! © 2015 - 2017
</p>
</div>
css:
.footer {
width: 100%;
height: auto;
text-align: center;
background: rgb(59, 67, 79);
position: fixed;
bottom: 0%;
margin-top: 50%;
}
* {
padding: 0;
margin: 0;
}
【讨论】：
我也遇到了同样的问题，用 jquery 解决了。
<body>
<div id="header" style="background-color: green">This is header</div>
<div id="main-body" style="background-color: red">This is body</div>
<div id="footer" style="background-color: grey">This is footer</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
if(($(document).height() - $("body").height()) > 0){
var main_body_height = $(document).height() - $("#footer").height() - $("#header").height()
$('#main-body').css('min-height', main_body_height+'px');
}
</script>我在这里所做的是基于用户的屏幕大小。
在减去页眉和页脚的高度后，我正在增加主体部分的高度。
如果完整的 html 正文高度小于用户屏幕尺寸，则会增加主体部分高度，并且页脚将自动到达页面底部。
【讨论】：