Question

我遇到与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 &copy; 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;
}

Answer 1

设置

#container {min-height:400px;}

并且您的问题应该得到解决。

模糊的HTML页脚需要CSS格式

1 个答案: