在所有浏览器中，我都无法将页脚固定在页面底部。
我有以下文档结构:
<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 文档类型时，页面在 IE8 中正确呈现，但在 IE8、Chrome 或 Firefox 中页脚未绘制在页面底部，即页脚位于菜单栏的正下方。
示例文档类型:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
我做错了什么？
最佳答案
使用代码中的 DOCTYPE 进行测试:
改变:
body
{
margin: 0;
height: 100%;
}
到:
html, body
{
margin: 0;
height: 100%;
}
为我修复它。
关于html - 帮助解决文档类型问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4669056/