页脚不会遇到调整大小的窗口的右边缘答案

【问题标题】：Footer wont meet the right edge of a re-sized window页脚不会遇到调整大小的窗口的右边缘
【发布时间】：2014-11-29 04:37:46
【问题描述】：

在开始之前，我想指出我对 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 并尝试以其他方式使内容居中？

【问题讨论】：

你能加个小提琴吗？

标签： html css css-content

【解决方案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>

这很棒，因为它还会设置您的页脚以匹配您的换页宽度：940px；它会将您的所有内容中心与您的页面包装一起保留。希望这可以帮助。

【讨论】：

【解决方案2】：

您可以在页脚 div 上尝试 width: 100% 但没有看到更多代码，很难完全诊断。

还可以考虑使用 CSS 重置，这将删除浏览器设置的默认值，这会使格式化/布局变得很麻烦。

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

【讨论】：

【解决方案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 是悬在边缘的东西。设置页脚的最小宽度可防止出现这种瑕疵并与窗口边缘相接。

再次感谢您的帮助！

【讨论】：

不要忘记将您的解决方案标记为您问题的正确答案，这样它就不会再显示在未回答的问题部分了。