页脚在不同的浏览器中采用不同的大小答案

【问题标题】：Footer taking different sizes in different browsers页脚在不同的浏览器中采用不同的大小
【发布时间】：2013-03-10 08:18:43
【问题描述】：

我正在构建一个网络应用程序。

我在页面中添加了页脚。

在 Firefox 中页脚变大（水平）。有什么可能的原因吗？

页脚是此处提到的粘性 div - http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

容器 CSS -

.container{

    background: #ffffff;
    width: 90%;
    min-height: 100%;
            height: auto !important;
            height: 100%;

    background: #FFF;
    margin: 0 auto -60px;
    max-width: 1200px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
    min-width: 768px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */

}

页脚 CSS -

#footer {
        height: 60px;

        background-color: #F0F0F0  ;

    width: 90%;
    margin: 0 auto 0;

    -moz-border-radius: 2px;
    border-radius: 2px;
        }

【问题讨论】：

页脚是 90%，您的 .container 也是如此，但 .container 有 max-width: 1200px; 第二张图片中的页脚 >1200px
谢谢！！我现在明白了。干杯！！

标签： html css footer sticky-footer

【解决方案1】：

只需将页脚元素的这两个属性添加到容器元素中

#footer
{
max-width: 1200px;
min-width: 768px;
}

【讨论】：

@mad.geek 很高兴为您提供帮助。你现在可以把它标记为答案吗:P :)
是的。它不允许我接受，直到 5 分钟结束。所以等待..欢呼:)

【解决方案2】：

在css中去掉-60px的margin来解决固定页脚UI设计的问题

【讨论】：

没有。 -60px 是为底部的页脚提供空间。它与左/右对齐无关。