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

你可以在页脚div上尝试宽度：100％但是没有看到更多的代码，很难完全诊断。

另外考虑使用CSS重置，它会删除浏览器设置的默认值，这会使格式化/布局变得很痛苦。

http://www.cssreset.com/what-is-a-css-reset/

Answer 2

您的页脚的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>

这很棒，因为它还会设置您的页脚以匹配您的页面包裹宽度：940px;它会将您的所有内容集中在您的页面包裹中。希望这可以帮助。

Answer 3

谢谢大家的帮助！我实际上刚刚想出了一个解决方案：

    div#footer{
        margin: 0 auto;
        background-color: #37184c;                          
        min-width: 980px;
        padding-bottom: 307px;
        text-transform: uppercase;
        text-align: right;
        }

我认为这个问题是由于主要内容区域有一个固定的：

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

它根本不是动态的，所以基本上IT就是悬而未决的东西。设置页脚的最小宽度可以防止出现这种瑕疵并与窗口边缘相遇。

再次感谢您的帮助！

页脚不会遇到重新调整窗口的右边缘

3 个答案: