css - メインコンテンツと同じサイドバーの高さ

Question

ここでワードプレスのテーマを編集しています。サイドバーの高さに問題があります。

右側のサイドバーをメイン コンテンツと同じ高さにするにはどうすればよいですか?

注意: サイドバーは "overflow: auto" パラメータで FLUID に保たれます。

Answer 1

同じ高さの列にはいくつかのテクニックがありますが、私は通常、Position Everything の Alex Robinson による次のテクニックが気に入っています。

どのように？

基本的な方法は次のように機能します。

1. 列として機能するブロックは、コンテナー要素でラップする必要があります
2. コンテナ要素にoverflow: hiddenを適用する
3. padding-bottom: $big_valueを列ブロックに適用します。ここで、$big_value は、最も高い列以上であることを保証するのに十分な大きさの値です。
4. margin-bottom: -$big_valueを列ブロックに適用します

CSS は次のようになります。

 #block_1, #block_2, #block_3 {
     padding-bottom: 32767px;
     margin-bottom: -32767px;
 }

 #wrapper {
     overflow: hidden;
 }

そしてHTML：

<div id="wrapper">
    <div id="block_1">
        <p>Content goes here</p>
    </div>
    <div id="block_2">
        <p>Content goes here</p>
    </div>
    <div id="block_3">
        <p>Content goes here</p>
    </div>
</div>