1

CSS の問題の解決策を探しています。これは Drupal テーマなので、コンテンツの高さが異なります。下部にフッターを固定し、構造を次のようにしました

<body>
  <div class="page-container">

    <div class="header">
    </div>

    <div class="content-container">

      <div class="content-insider">
       Different kind of content here
      </div>

    </div>
  </div>

  <div class="footer">
  </div>
</body>

content-container と content-insider の両方の高さが、少なくともブラウザー ウィンドウの高さであると同時に、内部のコンテンツの高さである必要があります。一番下まで拡大する必要があるのは背景です。私はいくつかの解決策を試しました（これもstackoverflowから）が、それらはコンテンツがブラウザの高さより短い場合にのみ機能します。さらにコンテンツがあり、下にスクロールすると、コンテンツ インサイダーはブラウザーの下部に到達する前に中断します。

4

1 に答える 1

0

これがスティッキーフッターの状況です。あなたはそれをグーグルするか、読み続けることができます。

  1. .page-container に 100% の min-height を設定します。
  2. box-sizing プロパティを border-box に変更して、パディング パディングを追加することで、高さが 100% 対 100% + パディングに等しくなるようにします。次に、それが完了したら、.footer の高さに等しいパディング下部を追加します。
  3. その高さに等しい負の margin-top を設定して、フッターを引き上げます。

それでおしまい。ここにフィドルがあるので、実際にそれを見ることができます：http://jsfiddle.net/joplomacedo/MqzGt/

于 2012-07-09T01:22:11.747 に答える