1

そのため、私はしばらくこの問題に悩まされてきましたが、解決策が見つからないようです。

(今のところ) 4 つの異なるコンテンツ領域で構成されるレイアウトを作成しようとしています。 基本レイアウト

私がやろうとしていること

私は次のことをしようとしています:

簡単な説明:コンテンツがページに収まる場合はそのすぐ後ろに、それ以外の場合は下部に固定された、ページでContent唯一のスクロール可能なものにする必要があります。footer

詳細な説明:

  • ページをスクロールしても と が動かないようにbanner修正。mainMenu
  • 次のcontentように、ページでスクロールを作成します。
    • content(および) がページに収まる場合、footerスクロールは表示されません。
    • スクロールが必要な場合は(表示されていない)contentの後ろに移動し、そのbanner上には表示されません。
    • スクロールが必要な場合はcontent、一番下の行までスクロールfooterして、表示領域に入ることができます。
  • は次のfooter2 つのことを行う必要があります。
    • contentページにfooter収まる場合は、ページfooterの下部に貼り付ける必要がありますcontent
    • それ以外の場合はfooter、底に固定する必要があります。

私が試したこと

固定banner、mainMenuおよび は、footerを使用して固定されますposition: fixed(そして、それに応じて配置されます)。親divが持っていますoverflow: hidden（これは機能していないようです）。

<div id='main'>
  <div id='banner'>banner</div>
  <div id='mainMenu'>mainMenu</div>
  <div id='content'>.. some long content ..</div>
  <div id='footer'>footer</div>
</div>

と

#main {
  width: 960px;
  height: auto;
  margin: 40px auto;
  overflow: hidden;
}
#main #banner {
  width: 960px;
  height: 100px;
  position: fixed;
}
#main #mainMenu {
  width: 230px;
  height: auto;
  display: inline;
  float: left;
  position: fixed;
  top: 140px;
}
#main #content {
  width: 720px;
  height: auto;
  display: inline;
  float: right;
  margin-top: 100px;
}
#main #footer {
  width: 960px;
  height: auto;
  clear: both;
  position: fixed;
  bottom: 0;
}

問題

content領域内に収まると フッターが追従しないフッターがコンテンツに従っていない バナーの上にコンテンツがはみ出す コンテンツがバナーからはみ出す

私はこれを CSS だけで (可能であれば)、可能な限り互換性を持たせて (IE7+、その他すべての主要なブラウザー) 実行したいと考えています。今は本当にイライラしています..どんな助けもいただければ幸いです。

4

1 に答える 1

1

cssを使用するだけで問題を解決できると私が考えることができる方法はありません。要素を固定位置に設定すると、それらはフローから外れるため、他の要素はそれらの周りに適合できません。

ただし、2つの異なることを行うことで解決策を見つけました。ヘッダーの問題については、メイン バナーの上にもう 1 つの固定要素を追加し、背景の色に設定しました。このようにして、コンテンツはその後ろにスクロールし、隠されているように見えます。フッターについては、jQuery を使用して JavaScript を設定し、コンテンツがオーバーフローするかどうかを確認します。存在する場合、フッターの位置は固定に設定され、そうでない場合、位置は相対に設定されます。

このデモですべてを確認できます: http://jsfiddle.net/mrQGh/4/

JavaScript をテストするには、オーバーフローがなくなるまでテキストを削除し、再度実行します。

于 2012-08-15T05:56:12.157 に答える