-1

aaa、ddd列と同じ高さのbbb + cccの列を作成するにはどうすればよいですか?

<html><body>
<div style="width:500px;height:500px;background-color:yellow">
 <div style="float:left;height:100%;background-color:green;">
  aaa
 </div>
 <div style="float:left;height:100%;background-color:#ff00ff">
  <div style='background-color:cyan;height:25px;'>
   bbb
  </div>
  <div style="background-color:gray;height:100%;">
   ccc
  </div>
 </div>
ddd
</div>
</body></html>

http://jsfiddle.net/WD94e/

4

2 に答える 2

1

あなたがしようとしていることは、テーブルを使わずに CSS で正確に実行できるわけではありません。あなたができる次善の策は、「偽の列」を作ることです.

http://jsfiddle.net/3wXv2/

HTML の更新 (インライン CSS を削除し、単純なクラス名を追加)

<div class="wrap d">
    <div class="a">aaa</div>
    <div class="bc">
        <div class="b">bbb</div>
        <div class="c">ccc</div>
    </div>
    ddd
</div>

CSS

.wrap{
    width:500px;
    height:500px;
    background-color:yellow;
}
.a{
    float:left;
    height:100%;
    background-color:green;
}
/* This is a "Faux Column" */
.bc{
    float:left;
    height:100%;
    /*background-color:#ff00ff;*/
    /* This is the faux column, make it the same as "DIV.c" */
    background-color:gray; 
}
.b{
    background-color:cyan;
    height:25px;
}
.c{
    background-color:gray;
    /*height:100%; /* Don't Do this.  Need to "faux column" this */
}

ここでの「トリック」は、コンテナーの「列」(スタッキング div .b および .c を含む Div.bc) が「偽の列」のように機能し、基本的に「C」の背景が実際には伸びていますが、そうではありません。

フェイク カラムについては、次の優れたリソースから読むことができます。

http://www.alistapart.com/articles/fauxcolumns/

「height:100%;」の問題 この宣言は、「列の残りの高さまで伸ばす」とは言っていないということです。

「私の身長を私の親の身長の100％に等しくしてください！」ということです。

つまり、親コンテナー (この場合は .bc) を見て、その高さ = をその高さに設定します。CSS を見ると、同じことを行う高さ 100% の .bc が表示されます。高さ = .wrap を 500px に設定します。

そのため...列「.c」は、「500px - 列にあるものは何でも」ではなく、500pxに設定されています.CSSはルールによってそのように機能しないためです。

もちろん、残りの列の高さよりも高いコンテンツが「div.c」にある場合、これはおそらく壊れます。

それが役立つことを願っています。

乾杯！

于 2012-04-27T19:14:38.290 に答える
0

この更新された Fiddle を参照してください: http://jsfiddle.net/WD94e/1/。

「bbb」列と「ccc」列の高さを合計して 100% になるように変更するだけです。

<div style="background-color:cyan;height:5%;">
    bbb
</div>
<div style="background-color:gray;height:95%;">
    ccc
</div>
于 2012-04-27T19:11:48.507 に答える