2

我在使页脚在所有浏览器中都粘在页面底部时遇到问题。

我有以下文档结构：

<html>
    <head>
    </head>

    <body>
        <div id="wrapper">
            <div id="header">
                <ul>
                    <li>home</li>
                </ul>
            </div>

            <div class="expander"></div>
        </div>

        <div id="footer" class="expander">
        </div>
    </body>
</html>

相关的CSS是：

body
{
 margin: 0;
 height: 100%;
}

#wrapper
{
 min-height: 100%;
 height: auto !important;
 height: 100%;
 margin: 0 auto -116px; 
}

.expander
{
 height: 116px;
}

#footer
{
 width: 100%;
}

#header ul
{
 list-style: none outside none;
 clear: both;
 margin: 0;
}

#header li
{
 margin: 0;
 margin-right: 20px;
 padding: 0;
 display: inline-block;
 height: 85px;
 padding-top: 20px;
 margin-bottom: -20px;
}

在没有任何文档类型的情况下使用时，页面会按照我在 Chrome 和 Firefox 中的预期呈现。然而，在 IE8 中，列表项选项卡位于不同的行中

当我添加 XHTML doctype 时，页面在 IE8 中正确呈现，除了页脚不在 IE8、Chrome 或 Firefox 中的页面底部绘制，即页脚直接位于菜单栏下方。

示例文档类型：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

我究竟做错了什么？

4

3 回答 3

2

使用代码中的测试DOCTYPE：

改变：

body
{
 margin: 0;
 height: 100%;
}

到：

html, body
{
 margin: 0;
 height: 100%;
}

为我修复它。

于 2011-01-12T13:19:55.250 回答
0

您需要让页脚留在页面底部，即

body, html{
    margin:0;
    height:100%;
}

#footer{
    position:absolute;
    bottom:0px;
    width:100%;
}

注意：这个解决方案被认为可以避免包装高度技巧/问题

于 2011-01-12T13:21:35.450 回答
0

除了使用错误的文档类型，正如我上面提到的，更改或删除文档类型绝不是一种选择。本质上，它是您告诉浏览器用于创建页面的一组规则。你不能在中途或一时兴起改变规则。更改/删除文档类型，更改规则。

永远，永远不要使用 IE 作为工作方式的参考。充其量是无能的，它在现代标准和合规性方面落后于所有其他公司十年或更长时间。如果它在 FF 和 Chrome 中工作，那么您的标记很可能是正确的。

生活刚刚打来电话，我希望以后能提供更多信息。

于 2011-01-12T13:58:27.177 回答