我设法让我的页脚贴在窗口的底部，然后避开我的内容 div...但是现在，它在下降到下方之前重叠了大约 15 像素。
我希望页脚放下，但绝不与内容重叠。我认为这可能与我的边距有关，但我的调整还没有解决这个问题。
有什么建议吗？
添加 margin-bottom:15px 似乎没有帮助，因为它只会在页脚重叠到足以将页脚向下推时显示。然后显示边距，但不会显示在少量重叠之前。
根据我在 Twitter 的 Bootstrap 示例中的理解，#push div 应该使这一切成为可能。
CSS:
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px;
min-width: 900px;
}
.main_nav {
list-style-type: none;
margin: 0;
width: 160px;
float: left;
padding-left: 40px;
overflow: hidden;
}
#bio_content {
width: 700px;
min-height: 445px;
margin-bottom: 15px;
float: left;
}
#bio_text {
padding: 10px;
}
#push {
height: 50px;
}
#footer {
height: 50px;
width: 100%;
float: left;
}
HTML:
<body>
<div id="wrapper">
<div id="header">
<h1></h1>
</div>
<ul class="main_nav">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="music.html">Music</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div id="bio_content">
<div id="bio_text"></div>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div id="footer_content"></div>
</div>
</body>
</html>
最佳答案
我认为这是一个 float 问题。 fiddle 将有助于更好地诊断这一点。我建议这样做
<body>
<div id="wrapper">
<div id="header">
<h1></h1>
</div>
<ul class="main_nav">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="music.html">Music</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div id="bio_content">
<div id="bio_text"></div>
</div>
<div style="clear:both"></div> //add this to clear the bio_content div
<div id="push"></div>
</div>
<div id="footer">
<div id="footer_content"></div>
</div>
</body>
</html>
关于css - 页脚在下降到下方之前与 Div 重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16468164/