3

サイドバーとコンテンツエリアが必要です。両方のセクションで同じ高さにしたいと思います。したがって、サイドバーの背景色を指定したい場合は、サイドバーのコンテンツがコンテンツセクションほど高くなくても、コンテンツ領域に従います。その逆も同様です。これを純粋なHTMLとCSSのみで作成したいので、JavaScriptのトリックはありません。

4

3 に答える 3

4

A List Apartに関するこの優れた記事では、このようなレイアウトをゼロから作成し、 Faux Columns (同じく ALA)など、このテーマに関する他の記事への興味深いリンクもいくつか含まれています。

于 2010-07-07T13:27:21.360 に答える
1

クロスブラウザ方式でこれを行う唯一の実際の方法は、テーブルを使用することです。

下のサイドバーセルにコンテンツが追加されると、行全体が強制的に拡張され、contentAreaセルも強制的に拡張されます。あなたはcssでそれらを個別にスタイリングすることができます。

<style>
  #sideBar { vertical-align:top;}
  #contentArea { vertical-align:top;}
</style>
<table>
  <tr>
    <td id="sideBar">SideBar</td>
    <td id="contentArea">content area</td>
  </tr>
</table>
于 2010-07-07T13:17:14.627 に答える
0

基本的に、サイドバーの高さを 100% に設定するだけで、親要素の高さに従います。以下の例では、コンテナ要素です。高さに関係なく、サイドバーの高さは 100% になるため、常にコンテナーと同じ高さになります。

<div id="wrapper">
  <div id="container">
      <div id="sidebar"></div>
  </div>
</div>

<style>
#wrapper {}
#container {min-height:500px;}  (or whatever you want for the height)
#sidebar {height:100%;}
</style>
于 2012-12-10T21:15:25.647 に答える