5

これを使用してCSSでスティッキーフッターを実装しようとしています：http ：//www.cssstickyfooter.com/using-sticky-footer-code.html 。

ほぼ機能していますが、コンテンツコンテナにフロートを入れると、フッターがコンテンツの一部と重なることがわかります。

これはマークアップです：

<div class="container" id="content-area">
  <div class="module-content" id="mycontent">
    <div class="menu">
      <ul>
        <li>
          <a class="current-page" href="http://localhost/">1</a>
        </li>
      </ul>
    </div>
    <div class="module-content">
      <div>
        <p>Lorem ipsum dolor sit amet, consequat et metus, platea
        posuere adipiscing porttitor dis amet ut. Turpis diam amet,
        mollit commodo. Fusce vestibulum habitant, auctor vel ac
        dui, nulla lacus hac, raesent euismod habitant eros massa
        nulla. Justo dui, facilisis cras. Est ante maecenas
        vehicula, etiam vestibulum mi lorem massa, sed nullam
        suspendisse lectus ante purus gravida, iaculis urna pede
        fermentum. Arcu id ligula arcu, erat vivamus quisque
        quisque, tristique ipsum et. Sociis duis ut, morbi dolor
        duis volutpat lacus viverra, scelerisque sodales sed, vel
        nulla. Elit pede nullam ullamcorper consectetuer ac massa,
        lobortis eget id dictumst et quis, nulla metus. Magnis id
        id suscipit porttitor faucibus, felis commodo risus massa,
        fusce tempus praesent aliquet sit vulputate tempor.</p>
      </div>
    </div>
  </div>
</div>
<div class="container" id="footer">
  <div class="container">
    <p>Lorem ipsum dolor sit amet, consequat et metus, platea
    posuere adipiscing porttitor dis amet ut. Turpis diam amet,
    mollit commodo. Fusce vestibulum habitant, auctor vel ac dui,
    nulla lacus hac,</p>
  </div>
</div>

そしてCSS：

html, body {
   height: 100%;
}

#content-area {
   min-height: 100%;
   overflow: auto;
   position: relative;
}

.container {
   margin: 0 auto;
   width: 985px;
}

#mycontent .menu {
   float: left;
   margin-right: 10px;
   padding-top: 13px;
   width: 100px;
}

#mycontent .module-content {
   float: left;
   width: 700px;
}

#footer {
   color: red;
   background: black;
   opacity: 0.6;
   height: 70px;
   margin-top: -70px;
   width: 100%;
   clear: both;
}

そして、上記のフィドル：http: //jsfiddle.net/CfuAg/

そして何が起こっているのかの写真 ここに画像の説明を入力してください

なぜこれが起こっているのですか、そしてそれを修正するいくつかの方法は何ですか？のパディングを追加しようとしました70pxが#content-area、フッターが押し下げられ70px、ウィンドウの下部に貼り付けられなくなりました。

4

2 に答える 2

2

修理済み！overflow: auto間違った要素に割り当てられ（に割り当てられる必要があります.module-content）、フッターの高さがである必要がありますmodule-content。bottom-padding

html, body {
   height: 100%;
}

#content-area {
   min-height: 100%;
      position: relative;
}

.container {
   margin: 0 auto;
   width: 985px;
}

#mycontent .menu {
   float: left;
   margin-right: 10px;
   padding-top: 13px;
   width: 100px;
}

#mycontent .module-content {
   float: left;
   width: 700px;
   overflow: auto;
   padding-bottom: 70px;
}

#footer {
   color: red;
   background: black;
   opacity: 0.6;
   height: 70px;
   margin-top: -70px;
   width: 100%;
   clear: both;
}
于 2012-04-28T05:36:51.737 に答える
1

私はあなたのフィドルを修正して、あなたが探しているものを私が理解したように機能するようにしました。

とを削除し、clear: both;代わりmargin-top: -70px;にbottom0に設定したプロパティを使用します

http://jsfiddle.net/CfuAg/4/

これがあなたが探していたものであることを願っています。

于 2012-04-28T04:08:19.767 に答える