我设置了一个练习网站，但侧边栏一直在页脚下方或与页脚混合。这是所有代码(至少一页)和稍后的 css。我只需要一个快速的帮助，我知道的不多，所以请帮忙。
<!doctype html>
<html>
<head>
<meta charset-"utf-8">
<title>Polyverse</title>
<link rel="stylesheet" href="style.css">
</head>
<!--main part-->
<!--header-->
<body>
<div id="container">
<div>
<body background="images/bg.jpg"></div>
<div id="header">
<h1><center><img src="images/header.png" width="960" height="120" alt=">/center></h1>
<!--navbar-->
<nav id="navbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="articles.html">Articles</a></li>
<li><a href="downloads.html">Downloads</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
</div>
<!--main content-->
<div id="sidebar">
<p>And my sidebar stuff here.</p>
</div>
<div id="main">
<h1><p>About</p></h1>
<article><p>All my text goes here</p></article>
</div>
<!--footer-->
<div id="footer">
<address><p align=right>Last updated the 24th of July 2013<br> Polyverse copyright</p>
</address>
</div>
</div>
</body>
</html>
和CSS:
html,
#body {
width: 960px;
margin: 25px auto;
padding-left: 1em;
font-family: Oswald, "Times New Roman",
Times, sans-serif;
height:100%;
}
#container {
position: relative;
padding-bottom: 50px;
min-height: 100%;
margin: 0 auto 0 auto;
}
#navbar {
width: 960px;
}
#navbar ul {
margin: 0;
padding: 5px;
list-style-type: none;
text-align: center;
background-color: #000;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #000;
}
#navbar ul li a:hover {
color: #000;
background-color: #fff;
}
#main {
float: left;
width: 600px;
}
#sidebar {
float: right;
width: 200px;
}
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted
}
p {
width: 800px;
margin: 25px auto;
}
#footer: {
height: 50px;
width: 960px;
position: absolute;
bottom: 0;
}
所以我只是想知道，我该如何解决它？
最佳答案
好吧，除了您的 HTML 充满错误之外，我建议将 container 设为一个类并将其添加到顶级容器之后。是的，clear 你的floats
像这样...(也清理了您的 HTML)... http://jsfiddle.net/feitla/TC73U/
<div class="container">
<div id="footer" class="clearfix"> <address><p align="right">Last updated the 24th of July 2013<br/> Polyverse copyright</p>
</address>
</div>
</div>
关于html - 我的侧边栏在页脚下，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17865936/