2

このようなCSSレイアウトを作成するにはどうすればよいですか？

+---------+
| header  |
+---------+
|         |
| fill    |
|         |
+---------+

どこ：

  • レイアウト全体がウィンドウ全体に広がります
  • 'header'と'fill'は2つのdivで、上下に並んでいます
  • 「ヘッダー」の高さは固定されていません（内容が変更される場合があります）
  • 「fill」は「header」によって残された残りのスペースをすべて埋め、「header」のサイズが変更されるとサイズが変更されます

簡単な解決策だと思いましたが、頭がおかしくなりません。

ありがとう

4

3 に答える 3

3

探しているのは、「スティッキーフッター」に必要なCSSに似ています。残りのすべての垂直方向のスペースを埋めながら、必要に応じて拡大できるようにする必要があります。トリッキーな解決策はたくさんありますが、バージョン8より前のIEではほとんどがサポートされていません（display: table;IEで可能になったのはそのときです）。

これは、しばらく前にまとめたスティッキーフッターソリューションのjsFiddleデモと、IE7でレイアウトを機能させるために必要なjQueryコードです。IE7のサポートが必要ない場合は、Javascriptコードを省略してください。特定のケースではフッターは必要ないため、フッター要素も省略してください。そして最後に:-p#header要素にはCSSで固定の高さが与えられます。CSSから行を削除height: 70pt;して、ヘッダーの高さを可変にします。

近い将来、CSSフレキシブルボックスモデルはこの種のレイアウトをはるかに簡単にするでしょうが、ブラウザのサポートは現時点ではまだ非常に最小限です。より広く利用できるようになるまで、display: table;代わりにフォーマットを使用することをお勧めします。

于 2013-01-04T06:39:04.090 に答える
1

コンテンツをヘッダー以外のウィンドウの残りの部分にまたがるようにする代わりに、本文でウィンドウを覆い、スタイルを設定して、コンテンツを可変サイズにします。

私はあなたのために簡単なjsfiddleをセットアップしました：http：//jsfiddle.net/xeP5M/

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

    </div>
    <div id="fill">
        this is where content goes        
    </div>
</div>​

およびCSS：

html, body { height: 100%; }
div { width: 100%; }

#container { background: #ff0; min-height: 100%; position: relative; }
#header { background: #f0f; height: 200px; }
#fill { background: #0f0; min-height: 100%; }

乾杯。

</ p>

于 2013-01-04T05:06:19.533 に答える
1

だからあなたはコンテナから始めるつもりです

<div id="contain">
</div>

次に、ヘッダーとフッター、およびスタイリングを追加します

<div id="contain">
   <div id="header">
      Content from Header
   </div>
   <div id="fill">
      Content from Fill
   </div>
</div>
#contain {
width:100%;
}
#header{
width:100%;
}
#fill{
width:100%;
min-height:100px;
}

塗りつぶしは、ヘッダーの高さに自動的に調整されます

http://jsfiddle.net/burn123/gWkm8/

于 2013-01-04T04:34:46.507 に答える