如何展開DIV使用整個父DIV高度

我有這樣的HTML結構：如何展開DIV使用整個父DIV高度

<div class="right_col" role="main" style="min-height: 647px;"> 
    <div class="fill"> 
    <div class="page-title"></div> 
    <div class="clearfix"></div> 
    <div class="row"></div> 
    </div> 
</div>

而「補」類：

.fill { 
    min-height: 100%; 
    height: 100%; 
    box-sizing: border-box; 
}

然而，與「補」的DIV類不擴展到它的父級，它的最小高度爲647px。有沒有辦法解決這個問題？

來源

2017-06-22 jstuardo

不給'.right_col'一個最小高度，只給'.fill'最小高度647px。 – Huelfe

基於百分比的高度要求父級具有設定的高度。最小高度沒有達到這個，因爲它沒有「設置」，高度仍然可以變化。嘗試在'right_col' div上放置'display：flex;'。 – Santi

百分比高度要求父元素具有定義的高度。設定一個固定的高度並不總是最好的。 – hungerstar

爲了使元素以百分比填充父元素的高度，父元素必須具有實際的高度集。

如果你考慮一下，這是有道理的。如果孩子的身高越來越高，這會拉伸父母，但這會使孩子需要長得更多，拉伸父母等等，直到父母和孩子無限高。這有點棘手。

如果你需要一個孩子，以填補一些空間，它的兄弟姐妹造成的，你也可以嘗試使用position: absolute和left，right，top，和/或bottom填補額外的空間，在某些情況下。

來源

2017-06-22 13:58:30 samanime

僅當父元素的height（不是min-height）已知時，正常文檔流中元素的百分比高度才起作用。在父母的身高本身是百分比的情況下，那麼該元素的父母身高必須是已知的。當高度未在所有祖先上明確設置時，這可以一直到HTML元素。

html, body { height:100%; } 
 

 
.right_col { 
 
    border: 2px solid blue; 
 
    height: 647px; 
 
} 
 

 
.fill { 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
    background-color:yellow; 
 
}

<div class="right_col" role="main"> 
 
    <div class="fill"> 
 
    <div class="page-title"></div> 
 
    <div class="clearfix"></div> 
 
    <div class="row"></div> 
 
    </div> 
 
</div>

來源

2017-06-22 13:59:42

_「每個祖先」_有點誤導，只有在每個元素的高度都是百分比時纔算數。如果沿途有某個固定的高度（或者可以計算出像'rem'或'vh'這樣的東西），那麼你會很好，比如'height：300px; >身高：75％; >身高：50％;'。 – hungerstar

好點。答案已更新。 –

你可以用彎曲;

.right_col { 
 
    min-height: 647px; 
 
    display: flex; 
 
} 
 

 
.fill { 
 
    flex: 1; 
 
    background: gray;/* see me */ 
 
    box-sizing: border-box; 
 
}

<div class="right_col" role="main"> 
 
    <div class="fill"> 
 
    <div class="page-title">t</div> 
 
    <div class="clearfix">clr</div> 
 
    <div class="row">r</div> 
 
    </div> 
 
</div>

來源

2017-06-22 14:00:31

只需添加到您的CSS：

.right_col { 
    position: relative; 
}

就是這樣。 Child div將考慮其母公司的100％。

來源

2017-06-22 14:30:18

如何展開DIV使用整個父DIV高度

回答

相關問題