0

ここでjsFiddleを参照してください：

http://jsfiddle.net/sheriffderek/y7fPK/1/

html, body {
height: 100%;
}

.page-wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
}

バッファとフッター...フィドルの方が理にかなっています。

スティッキーフッターは正常に機能しますが、下にスクロールすると、本文がコンテンツを含むように拡張されません。

ここに画像の説明を入力してください

VS. （下にスクロールすると）

ここに画像の説明を入力してください
このオレンジが見えますか？赤は本文で、HTMLはオレンジです...ビューポートを超えていません。体から高さを100％削除すると、これで解決しますが、フッターはコンテンツの最後までジャンプします。100％の高さはビューポートの高さのようです。これは理にかなっています...しかし、私は本文をHTMLと同じくらい大きくしたいです...任意のアイデア???

お時間をいただきありがとうございます。

4

1 に答える 1

0

ラッパーに隠された単純なオーバーフローが私のためにトリックをしているようです。

これがペンです。

http://codepen.io/sheriffderek/pen/DiewF

HTML：

<html><body>

    <div class="wrapper">

      <header>
          HEADER
      </header>

      <section class="main-content">
          MAIN CONTENT
      </section> <!-- end .main-content -->

      <div class="footer-buffer">BUFFER</div>

    </div><!-- end .wrapper -->

    <footer>
        FOOTER
    </footer>

</body></html>

CSS：

html, body {
  height: 100%;
}

.wrapper {
  min-height: 100%;
  height: auto !important; /* for IE 6 */
  height: 100%; /* for IE 6 */
  margin: 0 auto -4em;

  /* new addition */
  overflow: hidden; /* this seems to do the trick */
  /* remove this to see the problem */
}

footer, .footer-buffer {
  height: 4em;
}
于 2013-02-12T22:09:56.190 に答える