html - 页脚不会与调整大小的窗口的右边缘相交

Question

在开始之前，我想说明一下，我对 HTML 还很陌生，而且我是自学的。我最近刚开始，还有很多东西要学。

我的问题看起来很简单，但我似乎无法弄清楚。页面上的其他一切都很好，只是页脚才是问题所在。在全屏时，页脚会延伸到浏览器窗口的整个宽度:

但是当缩小它时它接受窗口的尺寸但它不将它放在窗口的中心:

这是我在页脚样式表中使用的代码。

div#footer{
        background-color: #37184c;                          
        padding-bottom: 307px;
        text-transform: uppercase;
        text-align: right;
        }

它被插入到设置为 940px 的页面换行之外。

div#page-wrap{
    width: 940px;
    margin: 0 auto;
    }

页面换行是页脚上方所有内容所在的位置。 有什么办法可以让页脚不断延伸到屏幕边缘吗？还是我应该删除 #page-wrap 并尝试以其他方式将内容居中？

Answer 1

您的页脚 CSS 如下:

#footerwrapper {    
width:100%;
padding-bottom: 307px;
text-transform: uppercase;
text-align: right;
}
#footercontent{
margin-left:auto;
margin-right:auto;
width:940px;
}

<!--HTML MARK-UP-->
<div id="footer">
<div id="footercontent">
<div>Your Footer info</div>
</div>
</div>

这很棒，因为它还会设置您的页脚以匹配您的 pagewrap width:940px;它将使您的所有内容中心都保留在您的页面包装中。希望这可以帮助。