【发布时间】：2015-02-17 07:11:31
【问题描述】：
我有与White space appears below sticky footer, only in PHP 类似的问题，并尝试了与Footer position issue - CSS 类似的各种解决方案
我的页脚在我的内容下方居中，但是当内容太短时，会有很多空白。我修改了我的 CSS 以将页脚移动到页面底部，除非内容更长，但它现在将页脚定位在内容上方和左侧，而我希望它位于中心和底部。 IE8 和 Chrome 之间的页面看起来也不同。
我的 PHP 页面生成以下 HTML：
<html><head><link rel="stylesheet" type="text/css" href="stylesheet.css"></head>
<body><div id="container"><div id="header"><p>Text</p></div>
<div id="navbar"><ul><li>1</li><li>2</li><li>3</li></ul></div>
<div id="content"><p>test</p></div><br />
<div id="footer"><hr><p><a href="address" <img src="picture" alt="">text</a></p>
<p>Copyright © text</p></div>
</body>
</html>
和 CSS：
body {
font-size:100%;
font-family:Arial, Helvetica, sans-serif;
font-size:1.075em;
background-image:url(images/gradient.jpg);
background-repeat:repeat-x;
margin:0;
padding:0;
height: 100%;
}
#container {
font-family:Arial, Helvetica, sans-serif;
font-size:1.075em;
min-height:100%;
position:relative;
height:100%;
}
#content {
margin-left:200px;
margin-right:100px;
padding:18px;
padding-bottom:128;
}
#footer {
clear:both;
margin-left:auto;
margin-right:auto;
text-align:center;
position:absolute;
bottom:0;
height:128px;
width:100%;
}
#navbar {
position:fixed;
float:left;
width:180px;
margin:0;
padding:6px;
}
#navbar ul {
margin:0;
padding:0;
list-style:none;
}
#navbar li {
margin:0;
padding:1px;
display:block;
list-style:none;
font-family:"Stencil", Helvetica, sans-serif;
text-align:center;
}
【问题讨论】：
-
@donald123 OP 表明这是生成的 HTML 标记。
-
是的。它是由几个包含组成的 PHP。我认为提供生成的 HTML 来调试 CSS 会更容易。
-
我试图编辑我的问题以避免更多的反对票，但了解它为什么有现有的五个会很有用。
-
现在是 2018 年，您不太可能知道原因。该问题在当前状态下似乎很好，但您可能希望关闭它以弥补您的损失。当人们喜欢无缘无故地批评，但有些人只是为了正义而打扰时，我理解这种挫败感。来自我的 +1。
-
Stallford 我建议您遵循这些规则。确保您的问题简洁易懂。不要煽动意见（仅限事实）。始终提供到目前为止和最后所拥有的代码示例，除了有些人只是混蛋。 =)