页脚重叠Div之前丢失
我设法让我的页脚坚持到窗口的底部,然后避免我的内容分区...但现在,它重叠约15px下降之前。页脚重叠Div之前丢失
我想让页脚掉落,但要从来没有重叠的内容。我认为这可能与我的利润率有关,但我的调整还没有解决这个问题。
有什么建议吗?
添加margin-bottom:15px
似乎没有帮助,因为只有页脚重叠足以将页脚向下推时才显示。然后显示余量,但不是在少量重叠之前。
#push
div应该让这一切成为可能,从我在Twitter的引导示例中理解的内容。
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>
我觉得这是一个浮动问题。小提琴将有助于更好地诊断此问题。我会建议这样做
<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。
#footer {
clear: both;
height: 50px;
width: 100%;
}
这似乎没有工作。它仍然反应,因为它之前,我加了'明确:都' – pianoman 2013-05-09 18:20:26
在这里工作很好。 [链接] http://jsfiddle.net/FreshTC/Kdawm/ – 2013-05-09 18:28:27
对不起链接:[链接] http://jsfiddle.net/FreshTC/Kdawm/3/ – 2013-05-09 18:34:55
如果我清除#bio_content div,则div会在导航下方下移。 “float:left”保持在那里。 – pianoman 2013-05-11 04:49:55