height: 100% 如何在相对 div 上工作？答案

【问题标题】：How does height: 100% work on relative divs?height: 100% 如何在相对 div 上工作？
【发布时间】：2019-09-07 18:55:39
【问题描述】：

height: 100% 是如何在 .rel div 上实际工作的？我确信相对 div 过去从未考虑过百分比高度...

.box{
    width: 200px;
    height: 200px;
}

.rel{
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px solid red;
}

a{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 60px;
}

b{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
}

<div class="box">
  <div class="rel">
    <a> aa  </a>
    <b> bb </b>
  </div>
</div>

【问题讨论】：

一直运行良好。甚至可以在 IE6 中运行。

标签： css height css-position

【解决方案1】：

如果他们的父母（box，在这种情况下）也被赋予高度，则相对 div 可以使用百分比高度。既然你给了box 200px 的高度，给rel 一个百分比高度实际上意味着什么。如果它的父级没有定义高度，rel 的高度将毫无意义，因为它的父级没有高度。如果您删除 box 的高度，更改 rel 的高度将无济于事，如下所示：http://jsfiddle.net/sxv9jLdz/

【讨论】：