1

ウィンドウ全体を埋める単一列の垂直レイアウトを行う方法を探しています。このレイアウトには 3 つのコンポーネントがあります。

  • ヘッダー (一定ですが、サイズは不明)
  • 本体 (可変サイズ、いっぱいに伸びる)
  • フッター (一定ですが、サイズは不明です)

ヘッダー/フッターが固定サイズで既知のサイズである前にレイアウトを作成しましたが、今は動的サイズにしたいと思います (コンテンツに基づいて)。フレキシブル ボックス モデルは、これを簡単にすることを意図しているように見えますが、それを機能させる方法がわかりません (おそらくブラウザーのサポートが原因である可能性があります)。

現時点では、FireFox のみのソリューションが必要です。完全に最新のバージョン (18 または 19 など) で問題ありません。

4

1 に答える 1

0 
<!doctype html>
<html lang="en">
  <head>
      <title>Header/Footer Vertical Centering Test</title>
      <style type="text/css">
      /* Set document height*/
      html, body { height:100%; }

      /* Set container height and context */ 
      #container { position:relative; min-height:100%; }

      /* Declare positioned children of container */
      #masthead, #footer { position:absolute; }

      /* Position masthead */
      #masthead { top:10px; }

      /* Position and layer footer */
      #footer { bottom:0; z-index: 2; }

      /* Set fluid height for footer */
      #footer { height:5%; }

      /* Set padding for content header placeholder */
      #header { padding-bottom: 10%; }

      /* Set fluid height and display for middle container */
      #middle { height:60%; display:table; padding-bottom: 5%; }

      /* Set display and vertically centered content */
      #vertcenter { display:table-cell; vertical-align: middle; }
      </style>
  </head>

  <body>

    <div id="container">
      <div id="header"></div>

      <div id="middle">
        <div id="vertcenter">
            Content
        </div>
      </div>

      <div id="masthead">
      header
      </div>

      <div id="footer">
      footer
      </div>
    </div>

  </body>

</html>
于 2013-02-07T19:53:21.950 に答える