<分区>
标签 css html containers footer
<分区>
我想在我的网站上制作一个粘性页脚。它必须位于页面底部，或者当添加更多文本时，它必须位于文本下方。我已经看过其他一些问题，但我似乎无法用这些答案解决它
这是我的代码:http://jsfiddle.net/9XjLL/
HTML:
<body>
<div id="header">
This is the header
<hr>
</div>
<div id="menu">
<br>
<b>Menu</b><br>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<br>
</div>
<div id="body">
<p> body </p>
<p> body </p>
<p> body </p>
<p> body </p>
<p> end </p>
</div>
</body>
<footer>
Footer
</footer>
CSS:
html, body {
height: 100%;
background: #E6E6E6;
margin: 0;
padding: 0;
}
#header {
text-align: center;
height: 50px;
position: static;
top: 0px;
z-index: 15;
background: #B2B2B2;
}
#body{
text-align: left;
margin-left: 210px;
margin-right: 200px;
margin-bottom: 5px;
background: #B2B2B2;
}
#menu {
width: 200px;
text-align: left;
left: 0px;
position: absolute;
background: #B2B2B2;
}
footer {
text-align: center;
height: 30px;
position: relative;
bottom: 0;
width: 100%;
background: #B2B2B2;
}
这可能是一些愚蠢的事情，但我想不通......
提前致谢!
最佳答案
我找到了一种解决方案。我添加/更改了以下行:
#body{
min-height: 83%;
}
footer{
position: static;
}
感谢大家的帮助!
关于css - 固定页脚在页面底部或文本下方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21235136/