我设法让我的页脚粘在窗口的底部,然后避开我的内容div ...但是现在,它重叠大约15px然后下降。
我希望页脚可以删除,但永远不会重叠内容。我认为这可能与我的利润有关,但我的调整还没有解决这个问题。
有什么建议吗?
添加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>
答案 0 :(得分:1)
我瘦它是一个浮动问题。小提琴有助于更好地诊断这一点。我建议这样做
<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>
答案 1 :(得分:0)
您需要清除页脚中的样式。添加一个明确的:两者都是你的页脚css。
#footer {
clear: both;
height: 50px;
width: 100%;
}