35

フッターのサイズを事前に知らなくても、 CSS を使用してブラウザー画面の下部またはコンテンツの直後 (どちらが長いかによる) にフッターを貼り付ける方法はありますか?

現在、フッターとコンテナーの最小高さが 100% のコンテンツを保持するコンテナーで絶対配置を使用していますが、フッターを変更すると、コンテナーの下部にあるパディングを高さに合わせて変更する必要があることがわかります。 .

4

7 に答える 7

38

http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/

概要：

ヘッダー、コンテンツ領域、およびフッターがあるサイトの場合:

  1. 設定html, body {height: 100%;}

  2. ボディ（またはラッパーdiv）をに設定しますdisplay: table; width: 100%; height: 100%;

  3. ヘッダー、フッター、およびコンテンツ領域を に設定しますdisplay: table-row;。ヘッダーとフッターheight: 1px;を指定し、コンテンツ領域を指定しますheight: auto;

    ヘッダーとフッターの両方がコンテンツに合わせて拡張されます。コンテンツ領域は、そのコンテンツの大きい方、または使用可能なスペースに合わせて拡張されます。

https://jsfiddle.net/0cx30dqf/

于 2012-01-10T19:41:37.753 に答える
24

HTML5 の未来に飛び込みたい場合は、flexboxを使用できます...

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
   flex: 1;
}
于 2013-12-06T20:15:01.003 に答える
1

これを試して！

フレックス採用！

高さ、JAVASCRIPT、テーブルの固定なし

コンテンツが増えると拡張し、ない場合は下部にくっつきます

注: IE 9 以下では動作しません

*{
  margin: 0; 
  padding: 0;
}
html, body{
  height: 100%; 
}
body{
  min-height: 100%;
  display: flex;
  flex-direction: column;
  
}
.content{
  flex: 1;
  background: #ddd;
}
<body>
  <header>
    Header
  </header>
  
  <div class='content'>
    This is the page content
    <br>
    PS. Don't forget the margin: 0 and padding: 0 to avoid scrollbars (this can be also put into the   body css)
  </div>
  
  <footer>
    Footer
  </footer>
</body>

于 2016-11-25T02:03:58.603 に答える
-2

このcssstickyfooterを見てください。どのブラウザでも問題なく動作します。

更新: これは 2010 年のものであり、現在の基準とは関係ない可能性があります

于 2010-12-03T15:59:54.927 に答える