Question

我有这个HTML结构：

<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>

＆＃34;填充＆＃34;上课是：

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

然而，DIV用＆＃34;填充＆＃34; class不会扩展为其父级，其最小高度为647px。有办法解决这个问题吗？

Answer 1

正常文档流中元素的百分比高度仅在父元素的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>

Answer 2

你可以使用flex;

＆＃13;

ConcurrentDictionary<string,ConcurrentDictionary<string,<Class Object>>>

＆＃13;

dictionary.Values.Select(x=> x.Values)

＆＃13;

Answer 3

为了使元素以百分比填充其父级的高度，父级本身必须设置实际高度。

如果你考虑一下这是有道理的。如果它的孩子正在增长它的高度，那就会拉伸父母，但是这会让孩子需要长得更多，伸展父母等等，直到父母和孩子都无限高。这有点棘手。

如果您需要孩子填补其兄弟姐妹造成的空间，您还可以尝试使用position: absolute和left，right，top和/或bottom在某些情况下填补额外空间。

Answer 4

只需将其添加到您的CSS：

.right_col {
  position: relative;
}

就是这样。子div将考虑其父div的100％。

如何扩展DIV以使用整个父DIV高度

4 个答案: