divカラムの高さ

どのようにしてbbb + cccの列をaaa、dddの列と同じ高さにするのですか？divカラムの高さ

<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/

出典

2012-04-27 user1361805

真剣に、ちょうど '

'を使用してください。（非標準またはCSS3-4のもので大丈夫でない限り） – Ryan

答えて

あなたがする探しているものは、正確ではありませんDO-テーブルを使用せずに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.bcには "faux column"のように振る舞い、基本的には "C"の背景が実際に伸びていると思うようになりますしかし、そうではありません。

あなたは、この優れたリソースからフェイク列について読むことができます

：

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

の問題 "の高さ：100％;"この宣言がではなく、 "列の残りの高さに伸びる"ということです。

「私の身長を親の身長の100％にしてください！」と言っています。

これは、親コンテナ（この場合は.bc）を調べ、その高さをその高さに設定することを意味します。あなたのCSSを見ると、.bcの高さが100％であることが同じことを示しています。これはheight = .wrapを500pxに設定します。

だから、 ".c"は500pxに設定され、 "500px - 他のものは列に含まれていません"と設定されています。

"div.c"の内容が残りの列の高さよりも高くなっても、これはおそらく中断されます。

私は役立つことを願っています。

乾杯！

出典

2012-04-27 19:14:38 jmbertucci

CSS3には「フレックスボックス」と呼ばれるものがあります（http://www.html5rocks.com/jp/tutorials/flexbox/quick/）これはまだ十分にサポートされていません（http://caniuse.com/#search=flex）。 – jmbertucci

この更新フィドルを参照してください：http://jsfiddle.net/WD94e/1/を。

あなたはちょうど彼らが合計100％になるように、「BBB」の高さと「CCC」列を変更する必要があります。

<div style="background-color:cyan;height:5%;"> 
    bbb 
</div> 
<div style="background-color:gray;height:95%;"> 
    ccc 
</div>

出典

2012-04-27 19:11:48

答えて

関連する問題