0

私は2つのDIVを持っています：

<div id="sidebar"></div>
<div id="content"></div>

サイドバーのdivをコンテンツと同じ高さに伸ばすにはどうすればよいですか。

助けてくれてありがとう。

アップデート：

これが他の要素を含む私のサンプルコードです：

http://tinkerbin.com/tkp2FZLZ

中央にコンテンツDIVがあり、異なる色の境界線を作成する4つのdivがあります。

4

4 に答える 4

0

あなたは簡単にあなたの望む結果を得ることができますdisplay:table-cell;

HTML

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

<div id="content">content</div>

CSS

#sidebar {
display:table-cell;
width:100px;
background:red;

}
#content {
display:table-cell;
width:100px;
background:yellow;
height:200px;
}

私はあなたがこのように見えていると思います; -http://tinkerbin.com/yqyX3mXg

于 2012-07-06T09:32:10.867 に答える
0

display: table-cell両方の列で使用します。

th/tdこれにより（視覚的に！そして視覚的にのみ。CSSです）、セルと同じように動作します。table-layout: fixed; display: table一方または両方の列に親と幅を追加して、他のテーブルアルゴリズムを使用できます。このアルゴリズムは、コンテンツに適応しようとはしませんが、必要な幅を尊重しようとします。

HTML：

<div id="sidebar"></div>
<div id="content">typo in your code, an =" was removed</div>

CSS：

#sidebar, #content {
  display: table-cell;
}

編集：IE8+と互換性があり
ますIE6/IE7にはインラインブロックを使用する必要があります...彼らは理解していません（ha！）。display: inline; zoom: 1はそれらの代替手段です。または、これらの列をフロートさせて、faux-columnという名前の手法を使用することもできます（tl; dr背景は親にあり、視覚的な偽物です。各列にあるように見えますが、そうではありません）
EDIT2：vertical-align: topこのようなレイアウト列にも必要になることがよくあります。

于 2012-07-06T09:25:21.057 に答える
0

これを試して

     #sidebar { position: relative; }
     #content { position: absolute; top: 0; bottom: 0; right: 0; }

     <div id="sidebar">
     <div id="content">
     </div>
     </div>
于 2012-07-06T09:28:20.740 に答える
-1

それらに同じ高さを設定すると、フロートを与えることもできます。ちなみに、HTMLにバグがある場合は、次のように記述してください。

<div id="sidebar"></div>
<div id="content"></div>​

そしてcss：

#sidebar{
width: 40px;
height:350px;
float: left;
margin-left: 10px;
border: 1px solid red;
}

#content{
width: 165px;
height:350px;
float: left;
margin-left: 10px;
border: 1px solid blue;
}

例

于 2012-07-06T09:28:03.630 に答える