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

相關問題