2

ヘッダー、コンテンツ、フッターのセクションが縦に配置された単純な HTML レイアウトを作成しようとしています。

ヘッダーとフッターの両方の高さは、コンテンツによって決定され、柔軟であるべきです。

コンテンツ セクションの高さは残りの高さである必要があるため、レイアウト全体でウィンドウの高さ全体が使用されます。コンテンツ セクションはスクロール可能です。

したがって、順番に：

  1. ヘッダ。高さはコンテンツの高さに依存します。スクロールバーはありません。
  2. コンテンツ。高さは残りです。window_height - (header_height + footer_height)。必要に応じてスクロールバー (overflow: auto;)
  3. フッター。高さはコンテンツの高さに依存します。スクロールバーはありません。

静的なヘッダーとフッターの高さの例はたくさんありますが、コンテンツ ベースの高さを処理できるものは見つかりませんでした。

絶対/相対/固定の位置でプレーンなdivを試しました。いくつかの構成で、display: table/table-row/table-cell で div を試しました。私も実際に使ってみました。しかし、これらのどれも機能していないようです。これは多くの失敗した試みの 1 つです: http://jsbin.com/uveloj/15/edit

スクリプトを使用せずにこれを行うにはどうすればよいですか (可能な場合は常に JS に依存しないことを好みます)。

4

3 に答える 3

1

フレームの使用を考えましたか？

于 2011-12-27T13:35:07.023 に答える
1

JavaScript を使用しないと、これは不可能だと思います。中央のスクロールを取得するには、コンテンツ領域の高さが設定されている必要があります。ヘッダーとフッターが動的に変化する可能性がある場合、JavaScript を使用せずにコンテンツ領域の高さをスクロールに合わせて更新する方法はありません。ただし、数行の JS を記述するだけの場合、これは非常に単純なレイアウトです。私はあなたのために良い例を持っています：

http://jsfiddle.net/rogerblanton/8ctJJ/

フレームは使用すべきではありません。

于 2011-12-27T13:27:13.640 に答える