2

久々にレイアウトを練りました。jsFiddle で例を作成することにしました。

http://jsfiddle.net/PSYgU/1/

私が直面している問題は、ASIDE がその親の「ラッパー」の高さいっぱいまで拡張されず、ビュー ポートの高さまでしか拡張されないことです。ASIDE も左右に移動できる必要があります。

テーブルなしで、このレイアウトを作成する他の方法を受け入れます。

/* PHP option to control the width of all content by wrapper via style */
/* PHP option to control which side to float the sidebar to via style */
<div id="wrapper" style="width:100%;">
    <aside style="float: right;">This Sidebar</aside>
    <header>The Header</header>
    <section>The Main Content Area</section>
    <footer>The Footer</footer>
</div>

html, body {
  min-height: 100%;
  height: 100%;
}
#wrapper {
  margin: 0;
  padding: 0;
  background: brown;
  height: 100%;
}
aside {
  width: 200px;
  background: yellow;
  height: 100%;
}
header {
  height: 150px;
  background: blue;
  width: 100%;
}
section {
  background: red;
  width: 100%;
  height: 100%;
}
footer {
  height: 50px;
  background: green;
  width: 100%;
}
4

1 に答える 1

1

高さ 100% にもセクションがあり、ラッパー内にもあるため、サイドバーと同じようにラッパーの完全な高さになります。

例: body/html とラッパーの高さが 200px の場合、高さが 100% の要素ラッパー内のすべての高さが 200px になります。高さ 150px のヘッダーをラッパー内に追加すると、これを前の 200 に追加する必要があります。 .

これにより、ヘッダーの高さが不足しているため、サイドバーの高さがラッパーの下部に達することはありません。

これに対する解決策は、ヘッダー 15% とセクション 85% のように、ヘッダーとセクションを合わせて 100% の高さにすることです。

これは、両方がスケーリングされますが、サイドバーは常に同じ高さになることを意味します。

<div id="wrapper">
    <aside style="float: right;">This Sidebar</aside>
    <header>The Header</header>
    <section>The Main Content Area</section>
</div>
<footer>The Footer</footer>

    html、本文{
      最小高さ: 100%;
      高さ: 100%;
    }
    #ラッパー{
      マージン: 0;
      パディング: 0;
      背景: 茶色;
      高さ: 100%;
      幅:100%
    }
    脇 {
      幅: 200px;
      背景: 黄色;
      高さ: 100%;
    }
    ヘッダー {
      高さ: 15%;
      背景: 青;
      幅: 100%;
    }
    セクション {
      背景: 赤;
      幅: 100%;
      高さ: 85%;
    }
    フッター {
      高さ: 50px;
      背景: 緑;
      幅: 100%;
    }
于 2013-01-14T17:18:00.330 に答える