页脚重叠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>

来源

2013-05-09 pianoman

我觉得这是一个浮动问题。小提琴将有助于更好地诊断此问题。我会建议这样做

<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>

来源

2013-05-09 18:28:44 Vector

如果我清除#bio_content div，则div会在导航下方下移。 “float：left”保持在那里。 – pianoman 2013-05-11 04:49:55

你需要清除的样式在您的页脚。添加一个清晰的：都到你的页脚css。

#footer { 
clear: both; 
height: 50px; 
width: 100%; 
}

来源

2013-05-09 18:18:40

这似乎没有工作。它仍然反应，因为它之前，我加了'明确：都' – 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

页脚重叠Div之前丢失

回答

相关问题