13

私はかなり基本的な HTML ページを持っています。コードは次のようになります。

<body>
  <header style="min-height: 255px;">
  </header>

  <article style="padding-bottom: 60px; width: 900px; margin: 0 auto;">
    Body text goes here.
  </article>

  <footer style="position: absolute; bottom: 0px; width: 100%; height: 60px; background-color: black;">
    Copyright information
  </footer>
</body>

通常、私の本文はかなり大きいです。テキストは、スクロール バーが必要なほど大きいです。フッターがテキストの上に下に向かって配置されているように見えます。次に、下にスクロールすると、フッターが固定されません。私は何を間違っていますか？

ありがとうございました

4

5 に答える 5

20

position:fixed;フッターに必要なもの：

<body>
  <header style="min-height: 255px;">
  </header>

  <article style="padding-bottom: 60px; width: 900px; margin: 0 auto;">
    Body text goes here.
  </article>

  <footer style="position: fixed; bottom: 0px; width: 100%; height: 60px; background-color: black;">
    Copyright information
  </footer>
</body>
于 2012-12-09T14:40:52.080 に答える
7

position: absoluteフッターを に変更position: fixed。

http://jsfiddle.net/SUQuX/

なんで？これは、それらがどのように異なるかを説明していますhttps://css-tricks.com/absolute-relative-fixed-positionioining-how-do-they-differ/absolute本体と一緒にスクロールします。

于 2012-12-09T14:37:54.160 に答える
4

position: fixedの代わりに使用しposition: absoluteます。

<footer style="position: fixed;">

なんで？これは、それらがどのように異なるかを説明していますhttps://css-tricks.com/absolute-relative-fixed-positionioining-how-do-they-differ/本体と一緒にスクロールします。

于 2012-12-09T14:42:34.437 に答える