HTML5，隐藏溢出的高度计算

Question

为什么HTML5，在这个例子中，如果溢出被设置为隐藏在父元素上，那么在计算子元素的高度时会有所不同？如果没有HTML5文档类型和/或溢出，则显示文本而不隐藏它。

CSS

.parent {
    position: relative;
    overflow: hidden;
}

.child {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

HTML

<div class="parent">
    <div class="child">
        Test
    </div>
</div>

Answer 1

不可能将父级隐藏为溢出以及相对定位。而不是你可以添加额外的孩子并让它流动溢出。

此用法的更好示例如下所示。

.parent {
    position: relative;
    background-color:#eeeeee;
    width: 200px;
    height: 200px;
}

.child {
    position: absolute;
    background-color:#dddddd;
    bottom: 10px;
    left: 0;
    right: 0;
}

.another-child {
    overflow: hidden;
}

<div class="parent">
      <div class="another-child">
        Another child containing a long text with overflow property as hidden
    </div>
    <div class="child">
        Test
    </div>
</div>