1

フッターをウィンドウの下部に貼り付けてから、コンテンツ div を回避することができました...しかし、現在、下に落ちる前に約 15px オーバーラップしています。

フッターを削除したいが、コンテンツと重ならないようにしたい。余白と関係があるのではないかと思いますが、微調整してもまだ解決していません。

助言がありますか？

フッターが重なってフッターが押し下げられた場合にのみ表示されるため、追加margin-bottom:15pxしても効果がないようです。次に、マージンが表示されますが、その少量のオーバーラップの前ではありません。

div は、#pushTwitter のブートストラップの例で私が理解したことから、これをすべて可能にするはずです。

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

2 に答える 2

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>
于 2013-05-09T18:28:44.400 に答える
0

フッターのスタイルをクリアする必要があります。フッター css に clear:both を追加します。

#footer {
clear: both;
height: 50px;
width: 100%;
}
于 2013-05-09T18:18:40.897 に答える