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的东西。） – Ryan2012-04-27 18:58:08

回答

什么你希望做的是不完全做 - 无需使用表格即可在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包含了堆叠div .b和.c），就像“人造色彩”一样，它基本上让人觉得“C”的背景实际上是在延伸但事实并非如此。

你可以从这个优秀的资源了解人造列：

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

有问题 “的高度：100％;”是这个声明是而不是说“伸展到列的剩余高度”。

它说：“让我的高度等于我的父母的高度的100％！”。

这意味着，它看起来在父容器（在这种情况下.BC），并且将它的高度=到该高度。如果你看看你的CSS，它会显示.bc为100％的高度，它可以做同样的事情。它使它的height = .wrap设置为500px。

所以......柱“.c”的设置为500像素，而不是‘500px的 - 无论其他人在列’，因为CSS只是不工作的方式由它的规则。

当然，如果你碰巧有“div.c”比其余柱高含量较高，这将可能打破。

我希望有帮助。

干杯！

来源

2012-04-27 19:14:38 jmbertucci

一个侧面说明，CSS3有一种叫做“Flexbox的”（http://www.html5rocks.com/en/tutorials/flexbox/quick/）它还没有很好的支持（http://caniuse.com/#search=flex）。 – jmbertucci 2012-05-02 13:16:39

看到这个更新小提琴：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-27 19:11:48

回答

相关问题