1

すべてのコンテンツは動的です。

#block {
    width: 500px;
    background-color:#fff000;
    border: thin solid #999;
 
}
#col1{
    width: 300px;
    background-color:#ffffff;
    float:left;
    height:auto; 
    overflow: auto;
}

#col2{
    width: 180px;
    background-color:#ffaaff;
    float:right;
}
.clear {
    clear: both
}
<div id="block">
    <div id="col1">

      white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white 

    </div>
      
      <div id="col2">
        pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink 

      </div>
    <div class="clear"></div>  
</div>

ピンクの列の高さをペアにするために、白い列を垂直に伸ばします（下の黄色の境界線に到達します）。絶対または相対表示を使用しないことを好みます。

display:relativeとを使用したソリューションは次のとおりdisplay:absoluteです。それは機能しますが、より複雑な構造では他の問題が発生します。

#block {
    width: 500px;
    background-color:#fff000;
    border: thin solid #999;
    position:relative;
}
#col1{
    width: 300px;
    background-color:#ffffff;
    float:left;
    height:100%; 
    overflow: auto;
    position:absolute;
}

#col2{
    width: 180px;
    background-color:#ffaaff;
    float:right;
}
.clear {
    clear: both
}
<div id="block">
    <div id="col1">

      white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white 

    </div>
      
      <div id="col2">
        pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink 

      </div>
    <div class="clear"></div>  
</div>

4

3 に答える 3

1

絶対/相対を使いたくないですか？何を使いたいですか？

これはCSSのみの修正です。それ以外の場合は背景画像 http://unnaturalcode.blogspot.com/2012/08/css-recipe-for-making-elements-fill.html

于 2012-09-14T23:54:47.450 に答える
0

ストレッチする要素とそのすべての親コンテナーを に設定しheight:100%;ます。

例えば、

#element_to_be_stretched, html, body {height: 100%}
于 2013-04-21T17:45:51.847 に答える
0

これを参照してください：

html, body { height: 100% }

#block {
    width: 500px;
    background-color:#fff000;
    border: thin solid #999;
    height: 100%;
}
#col1{
    width: 300px;
    background-color:#ffffff;
    float:left;
    height:100%; 
    overflow: auto;
}

#col2{
    width: 180px;
    background-color:#ffaaff;
    float:right;
}
.clear {
    clear: none
}
<div id="block">
    <div id="col1">

      white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white 

    </div>
      
      <div id="col2">
        pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink 

      </div>
    <div class="clear"></div>  
</div>
html, body { height: 100% }

#block {
    width: 500px;
    background-color:#fff000;
    border: thin solid #999;
    height: 100%;
}
#col1{
    width: 300px;
    background-color:#ffffff;
    float:left;
    height:100%; 
    overflow: auto;
}

#col2{
    width: 180px;
    background-color:#ffaaff;
    float:right;
}
.clear {
    clear: none
}

(クリア DIV を変更し、height: 100%周囲の要素に追加しました。)

于 2012-09-14T23:57:19.777 に答える