我知道有 1001 个 CSS 页脚 hack 需要多次扭曲才能满足即使是最旧的浏览器。
但我想知道如何为符合现代标准的浏览器制作页脚。我希望下面的代码能工作，但它没有——页脚不在页面底部，而是在“内容”的正下方。为什么？
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Footer Test</title>
<style type="text/css">
html
{
height: 100%;
margin: 0;
padding: 0;
}
body
{
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
#page
{
position: relative; /* <--- relative position for footer's parent */
height: 100%;
background-color: #AAA;
}
#header
{
height: 3em;
margin: 0;
padding: 1em;
background-color: #F00;
}
#content
{
margin: 0;
padding: 1em;
background-color: #0F0;
}
#footer
{
position: relative;
bottom: 0; /* <--- distance from #footer's bottom to #page's bottom */
height: 3em;
margin: 0;
padding: 1em;
background-color: #00F;
}
</style>
</head>
<body>
<div id="page">
<div id="header">
<p>This is the header!</p>
</div>
<div id="content">
<p>Yeah, some content!</p>
<p>Yeah, some content!</p>
<p>Yeah, some content!</p>
</div>
<div id="footer">
<p>This is the footer!</p>
</div>
</div>
</body>
</html>
编辑:
说明:我希望页脚位于视口(viewport) 的底部。因此，如果内容很少，则内容下方应有空白，页脚应位于页面底部。但是如果有很多内容滚动条应该出现，页脚应该只有在向下滚动时才可见。
最佳答案
#footer
{
position: fixed;
width:100%;
bottom: 0; /* <--- distance from #footer's bottom to #page's bottom */
height: 3em;
margin: 0;
padding: 1em;
background-color: #00F;
}
关于理论上的 CSS 页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17486901/