如何使內部的高度父母未知身高全高？

Question

我需要.col爲.row高度的100％，但您可以看到第二個.col不足。我怎樣才能得到這個工作，而不使用任何「幻數」？

http://jsfiddle.net/b21g6fme/

.row { 
 
    position: relative; 
 
    background: #f99; 
 
} 
 
.col { 
 
    margin: 0 0 0 8px; 
 
    display: inline-block; 
 
    width: 40%; 
 
    position: relative; 
 
    vertical-align: top; 
 
    background: #999; 
 
    height: 100%; 
 
} 
 
.col:first-child { 
 
    margin: 0; 
 
} 
 
.item { 
 
    display: block; 
 
    position: relative; 
 
    top: 0; 
 
    margin: 12px 0 0 0; 
 
    min-height: 80px; 
 
    width: 100%; 
 
    outline: 4px solid black; 
 
} 
 
.item:first-child { 
 
    margin: 0; 
 
} 
 
.item.large { 
 
    min-height: 120px; 
 
    height: 100%; 
 
} 
 
.item.red { 
 
    background: #f00; 
 
} 
 
.item.blue { 
 
    background: #0f0; 
 
} 
 
.item.green { 
 
    background: #00f; 
 
}

<div class="row"> 
 
    <div class="col"> 
 
     <div class="item red"></div> 
 
     <div class="item blue"></div> 
 
    </div> 
 
    <div class="col"> 
 
     <div class="large item green"></div> 
 
    </div> 
 
</div>

如果父項已高度定義的百分比值

Answer 1

這可以通過使用flexbox來實現：

• 添加display: flex;到.row。這告訴其子使用flexbox模型
• 添加flex-direction: row;到.row，因爲我們希望孩子們對準水平
• 添加display: flex;到.col。這告訴其子使用flexbox模型
• 添加flex-direction: column;到.col，因爲我們希望孩子們對準垂直
• 添加flex: 1;到.item允許它生長並填充可用的空間，如果需要
• 一些款式從您原來的版本，因爲他們不再需要使用時被移除flexbox

.row { 
 
    background:#f99; 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 
.col { 
 
    background: #999; 
 
    display: flex; 
 
    flex-direction: column; 
 
    margin:0 0 0 12px; 
 
    width:40%; 
 
} 
 
.col:first-child { 
 
    margin:0; 
 
} 
 
.item { 
 
    flex: 1; 
 
    margin: 12px 0 0 0; 
 
    min-height: 80px; 
 
    outline:4px solid black; 
 
    width: 100%; 
 
} 
 
.item:first-child { 
 
    margin:0; 
 
} 
 
.item.red { 
 
    background:#f00; 
 
} 
 
.item.blue { 
 
    background:#0f0; 
 
} 
 
.item.green { 
 
    background:#00f; 
 
}

<div class="row"> 
 
    <div class="col"> 
 
     <div class="item red"></div> 
 
     <div class="item blue"></div> 
 
    </div> 
 
    <div class="col"> 
 
     <div class="large item green"></div> 
 
    </div> 
 
</div>

flexbox支持很不錯，雖然舊版本的IE不支持它。 http://caniuse.com/#feat=flexbox

Answer 2

兒童項目的高度纔會工作。

否則，你可以用jQuery實現它

$(".col").height($(".row").height()); 

Answer 3

嘗試這個

.large.item { 
    height:100%; 
} 

Answer 4

您可以通過Flexbox的做，如果你不關心任何IE低於11

我展示瞭如何完成here。

.row { 
    position: relative; 
    background:#f99; 
    display: flex; 
} 

.col { 
    margin:0 0 0 8px; 
    display:inline-block; 
    width:40%; 
    position: relative; 
    vertical-align:top; 
    background: #999; 
} 
.col:first-child { 
    margin:0; 
} 
.col:last-child { 
    display:flex; 
} 

.item { 
    display:block; 
    position: relative; 
    top:0; 
    margin: 12px 0 0 0; 
    min-height: 80px; 
    width: 100%; 
    outline:4px solid black; 
} 
.item:first-child { 
    margin:0; 
} 

.item.large { 
    min-height:120px; 
} 

.item.red { 
    background:#f00; 
} 
.item.blue { 
    background:#0f0; 
} 
.item.green { 
    background:#00f; 
} 

Answer 5

這裏是簡化的CSS表格佈局，訣竅是將全高div設置爲絕對位置，頂部和底部都設置爲0。

JsFiddle Demo

.row { 
 
    display: table; 
 
} 
 
.col { 
 
    display: table-cell; 
 
    vertical-align: top; 
 
    position: relative; 
 
} 
 
.item.large { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
} 
 
.item.red { 
 
    background: red; 
 
} 
 
.item.blue { 
 
    background: blue; 
 
} 
 
.item.green { 
 
    background: green; 
 
}

<div class="row"> 
 
    <div class="col"> 
 
     <div class="item red">r<br/>e<br/>d</div> 
 
     <div class="item blue">blue</div> 
 
    </div> 
 
    <div class="col"> 
 
     <div class="large item green">green</div> 
 
    </div> 
 
</div>

Answer 6

如果你可以讓父相對定位，和孩子絕對possitioned，給孩子的0值之上的底部將使其伸展給父母全高。