0

私は DIV レイアウトと CSS を使用するのが初めてなので、質問しようとしていることが意味をなさない場合はご容赦ください。

問題
すべてが空白の場合、div が画面いっぱいに表示されてページが正しくレンダリングされるページがあります。コンテンツがコンテンツ領域よりも大きい状況をテストしたところ、コンテンツ div の高さがコンテンツと共に拡張されませんでした。私はこれに数時間取り組んできましたが、うまくいかないようです。以下は、私のCSSシートがどのように見えるかです。アドバイスをいただければ幸いです。

ヘッダー セクションは常に100px
の上部にあり、サブメニュー セクションは常に 50px のヘッダーの下にあり、フッターは常に 50px のページの下部にあり、コンテンツ セクションは常にサブメニューとフッター セクションの間にあります。コンテンツがページを埋め尽くさない場合は、コンテンツ セクションがページの残りを埋めます。そのため、フッターは一番下にあり、コンテンツがページよりも大きい場合は、コンテンツ セクションがフッターを画面の下に押し下げて、すべてのコンテンツを埋めます。 （それが理にかなっていることを願っています）

私のウェブページには、次の div があります。

Div 1 - container
Div 2 - Header
Div 3 - SubMenu
Div 4 - Content
Div 5 - Footer

CSS シート

body, html {
    height: 100%;
    margin: 0px;
    padding: 0px;
    background-color: #7EB5D6;
}

.container {
    width: 700px;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
    position: relative;
    overflow: auto;
}

.Header {
    width: 100%;
    height: 100px;
    background-color: lightpink;
    position: relative;
}

.SubMenu {
    width: 100%;
    height: 50px;
    background-color: darkgray;
    position: relative;
}

.Content {
    width: 100%;
    height: calc(100% - 200px);
    background-color: wheat;
    position: relative;
}

.Footer {
    width: 100%;
    height: 50px;
    background-color: black;
    position: inherit;
    bottom: 0;
}
4

2 に答える 2

1

コンテンツに応じて自動調整できるように、コンテンツの height:auto を配置します。

于 2013-05-08T15:36:46.717 に答える
0

clearfixメソッドを使用してください！それは魅力のように機能します！

これを css のどこかに追加します。

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

clearfix次に、適切なすべての div に 2 番目のクラスとして追加します。

于 2013-05-08T15:41:40.743 に答える