2013-03-08 106 views
0

是否有可能具有取決於其他div的大小的div高度?如何爲div創建動態高度

這裏是例子

<div id="wrapper" style="height:400px;background-color:green;"> 

    <div id="content1" style="height:auto;min-height:50%;background-color: limegreen;"> 
     Content 1 
    </div> 

    <div id="content2" style="min-height:20%;background-color:lightblue;"> 
     Content 2 
</div> 

<div id="content3" style="min-height:20%;background-color:blue;"> 
     Content 3 
</div> 

</div> 

你可以看到它也是在這裏:http://jsfiddle.net/kXfsY/28/

可以看到,DIV包裝不被別人的div重疊。 我想讓div content1的高度至少爲div封裝的50%或更多,所以整個div封裝將會重疊。 div內容2和3的大小將是動態的,取決於內部有多少物品。或者,也許div內容2或div內容3將是空的,那麼將是很好,如果div div1將增加和div包裝的全高度將被使用。

這可能嗎?

謝謝

+4

儘量避免內聯CSS,'ID = 「內容2」'使用了兩次。一個ID應該是唯一的。否則使用類而不是 – 2013-03-08 15:31:15

回答

1

您可以display: tabledisplay: table-row做到這一點。您可以刪除#content2/#content3元素或將它們設爲空標記。無論如何`#content1元素將佔用所有剩餘的空間。

http://codepen.io/cimmanon/pen/pHAcJ

#wrapper { 
    height:400px; 
    background-color:green; 
    display: table; 
    width: 100%; 
    table-layout: fixed; 
} 

#content1 { 
    min-height:50%; 
    background-color: limegreen; 
    display: table-row; 
} 

#content2, #content3 { 
    height:20%; 
    display: table-row; 
} 

#content2:empty, #content3:empty { 
    display: none; 
} 

#content2 { 
    background-color:lightblue; 
} 

#content3 { 
    background-color:blue; 
} 
+0

好。展示物業的理念是輝煌的。但是,如果內容2或內容3爲空,則內容1不會填滿整個div封裝。我嘗試在Firefox中。它僅適用於您鏈接的那個頁面,codepen.io。 – squirrelInTheBarel 2013-03-08 21:54:19

+0

它看起來像它在Firefox的作​​品給我?也許你在將它翻譯成自己的項目時錯過了一些東西?對於':empty'僞類的工作,標籤必須是完全空的(例如'

'和'
'爲空,但是'
'和'
'不爲空)。 – cimmanon 2013-03-08 22:00:41

+0

好的完美。你是真正的上師。非常感謝你! – squirrelInTheBarel 2013-03-09 12:22:27