HTML5,隐藏溢出的高度计算

Question

为什么HTML5，在这个例子中，如果overflow设置为hidden on parent，子元素的高度计算会有所不同？没有 HTML5 doctype and/or 溢出，文本显示而不隐藏。

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>

HTML5,隐藏溢出的高度计算

HTML5, height calculation with overflow hidden

html

overflow