html - DIV 要素の幅と高さを調整する

Question

ページの左側に垂直ナビゲーション バーがあり、ナビゲーション バーの右側に「コンテンツ」領域があるページがあります。「コンテンツ」領域の幅を画面の残りの部分に合わせ、高さをナビゲーションバーの高さと一致させたい。

これが私がこれまでに持っているものです:

できれば、この問題に対する純粋な CSS ソリューションを探しています。

Answer 1

通常、フェイク カラム手法は、コンテンツで満たされていないスペースを埋めるために使用されます。CSS グラデーションを画像に置き換える必要があり、固定サイズを設定する方がはるかに簡単です (ただし、可変サイズでも可能です)。

基本的に、HTML 要素を次のように構成する必要があります。

<div id="header"></div>
<div id="wrapper">
    <div id="sidebar"></div>
    <div id="content"></div>
</div>
<div id="footer"></div>

コンテンツを拡張する限り、CSS が作業を行います。

/* The top part of the rounded container */
#header { 
    background: url(images/bg_top.gif) 100% 100% no-repeat; /* sit on top */
}

/* The background for your content */
#wrapper { 
    background: url(images/bg_tile.gif) 100% 0 repeat-y; /* repeat on the right */
}

/* The bottom of your content */
#footer {
    background: url(images/bg_bottom.gif) 100% 0 no-repeat; /* sit on the bottom */
}

物事が完全に収まるようにするには、いくつかのマイナスのマージンをいじる必要があります.

Answer 2

コンテンツ エリアに最小の高さを適用します。

#content {
  position: absolute;
  margin-left: 200px;
  width: 100%;
  min-height:328px;
}

更新されたフィドルをチェックしてください: http://jsfiddle.net/hsGN6/6/

粗雑ですが、機能します。