0

利用可能なすべての領域を埋めるが、フッターまたはヘッダーの外側には決して伸びない MainContent div を間に挟んで、ヘッダーとフッターを作成するにはどうすればよいですか?

言い換えれば、ヘッダーとフッターの間の残りのスペースを埋めるが、それ以上のスペースは使用しないということですか?

ここに画像の説明を入力

どうすればこれができるのか考えられません。私は多くの試みを試みましたが、失敗したのは、中間のコンテンツ div が常にフッターの上部を超えてオーバーフローするためです。コンテンツ div をフッターの上部までだけ伸ばしたいのですが、それだけです。

overflow: hidden; を設定してみました。しかし、それはスクロールバーが表示されなくなるだけで、他には何もありません。

Javascript は許可されていません。

4

4 に答える 4

2

基本的に、bottom 属性をフッターの高さに設定し、overflow プロパティを auto に設定して、必要に応じてスクロール バーを追加すると、オーバーフローを防ぐことができます。

例えば、

#content {
   position: absolute;
   top: <height of header>px;
   bottom: <height of footer>px;
   overflow: auto;
}

ここにデモがあります： http://jsfiddle.net/bYdgj/1/

于 2013-08-22T00:35:29.697 に答える
2

ヘッダーとフッターを絶対配置すると、コンテンツ div の高さと幅を 100% に設定できるはずです。コンテンツ div の位置を必ず相対に設定してください。

于 2013-08-22T00:29:18.490 に答える
1

ヘッダーとフッターは常に画面のその位置にあるはずですか?

はいの場合は、position: fixed;を使用できます。css のプロパティ。このようにして、ヘッダーとフッターをウィンドウ画面に固定できます。

それらがメイン div によってカバーされている場合は、それとメイン コンテンツ div に z-index をスローします (メイン コンテンツに位置属性と、ヘッダーとフッターよりも小さい z-index があることを確認してください)。

それができたら、メイン コンテンツの div にマージンを配置して、ヘッダー/フッターの間に収まるようにします。

于 2013-08-22T00:31:31.927 に答える
1

考えられるアプローチはいくつかあります。

  1. ヘッダーとフッターを絶対にしてから、本文の高さを 100% にします
  2. ヘッダーとフッターを除くページ全体を色または画像で塗りつぶしたい場合は、本文background-colorまたは好きなものに変更するだけbackground-imageで完了です
  3. コンテンツを 100% にして、ヘッダーとフッターtop: 0を配置し、bottom: 0
  4. ヘッダーとフッターposition: fixedを作成しますが、ヘッダーとフッターは本文の前になります

ヘッダーとフッターの間にコンテンツを正確に収める必要がある状況を想像できないため、2 番目のアプローチを採用します。

于 2013-08-22T00:34:21.103 に答える