如何展开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高度

回答

相关问题