Css 页脚与Div重叠，然后放在下方_Css_Css Float_Footer_Sticky Footer

Css 页脚与Div重叠，然后放在下方

css

Css 页脚与Div重叠，然后放在下方,css,css-float,footer,sticky-footer,Css,Css Float,Footer,Sticky Footer,我设法使我的页脚粘在窗口底部，然后避免我的内容分割。。。但现在，它在下降到下面之前重叠了大约15px 我希望页脚可以删除，但不要与内容重叠。我认为这可能与我的利润率有关，但我的调整还没有解决这个问题有什么建议吗添加marginbottom:15px似乎没有什么帮助，因为它只在页脚重叠到足以向下推页脚时才会显示。然后显示边距，但不显示在少量重叠之前根据我在Twitter的bootstrap示例中所了解的，推送（push）div应该使这一切成为可能 CSS: * { margin: 0

我设法使我的页脚粘在窗口底部，然后避免我的内容分割。。。但现在，它在下降到下面之前重叠了大约15px

我希望页脚可以删除，但不要与内容重叠。我认为这可能与我的利润率有关，但我的调整还没有解决这个问题

有什么建议吗

添加

marginbottom: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;
}

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

HTML:

* {
    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;
}

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

您需要清除页脚中的样式。在页脚css中添加一个clear:tware

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

您需要清除页脚中的样式。在页脚css中添加一个clear:tware

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

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

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










//添加此项以清除bio_内容div

我认为这是一个浮动问题。一把小提琴将有助于更好地诊断这个问题。我建议这样做

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










//添加此项以清除bio_内容div

这似乎不起作用。它的反应仍然和我添加

之前一样清晰：两个中都没有
，这似乎不起作用。它的反应仍然与我添加清除之前一样：两个中都没有
。如果我清除了#bio#u content div，div会下降到导航下方。float:left
将其保留在那里。如果我清除#bio#u content div，该div将下降到导航下方。float:left
将其保留在那里。