コンテナと一致するサイドバーの高さを設定する

Question

コンテナにサイドバーがあるレイアウトがあります。サイドバーはコンテナと同じ高さにする必要があります。 this siteサイドバーが#leftbar、コンテナが#container

を参照してください。サイトをご覧になると、私の言うことがわかります。私は純粋なCSSソリューションかjqueryソリューションが必要です。

ナビゲーションは垂直アコーディオンなので、特定のボタンをクリックすると、サイドバー#leftbarが垂直方向に広がります。ソリューションは成長に対応する必要があるため、jqueryを使用して高さを単純に合わせることは実行可能なソリューションではありません。

Answer 1

これらの要素に次のプロパティを追加します。

プロパティが表示さ #leftbarを与える

#cotainer { 
    position: relative 
} 

#leftbar { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
} 

#righthome { 
    margin-left: 270px; /* looks to be about the width of the leftbar */ 
} 

を、position: relativeと次の親要素の先頭にトップスティックを確保し、下端に同じになります。

しかし、これには副作用があります。 #righthome要素は、その親ボックスレイアウトモデルの最初の要素になり、したがって、左のバーと重なります。これを解決するには、それを元の場所に戻すための左マージンを与えます。