html - 为什么子 div 会导致垂直滚动条与绝对父项一起显示？

Question

我有一个盒子 div，它通过绝对定位占据了所有空间。在盒子内部，还有另一个 div 应该占据相同的位置高度/宽度 100%。

在 IE11 上，以某种方式显示了垂直滚动条。 (Chrome、Firefox不显示滚动条)

我相信滚动条出现是因为有些东西溢出了，但我不知道为什么。

box div 的溢出必须设置为自动，所以如果有任何东西溢出，它应该显示垂直滚动条，但在 fiddle 示例中，据我所知，不应该有任何东西溢出。有什么想法吗？

http://jsfiddle.net/30w11ph2/8/

HTML:

<div class='box'>
    <div class='view'></div>
</div>

CSS:

.box
{
    position: absolute;
    top: 0;
    bottom: 60px;
    left: 0;
    right: 0;
    height: auto;
    width: auto;
    border: 2px solid red;
    overflow: auto;
}

.view
{
    height: 100%;
    width: 100%;
    display: inline-block;
    vertical-align: top;
}

Answer 1

行内 block 元素参与行内格式化上下文。这意味着有行框，行内框在其中垂直对齐。

可以使用 vertical-align 设置垂直对齐方式，它最初是 baseline。这会导致 usually unwanted space underneath .这可以固定设置 vertical-align 到 top, bottom, middle, ...

在这种情况下，我的猜测是 IE 不喜欢 vertical-align: top，因此它不能解决元素下方的空间问题。因此，100% + space > 100%，因此存在溢出。

但是你可以解决它

.view {
  vertical-align: middle;
}

.box {
    position: absolute;
    top: 0;
    bottom: 60px;
    left: 0;
    right: 0;
    height: auto;
    width: auto;
    border: 2px solid red;
    overflow: auto;
}
.view {
    height: 100%;
    width: 100%;
    display: inline-block;
    vertical-align: middle;
}

<div class='box'>
  <div class='view'></div>
</div>

或者，您可以使用 block 而不是内联 block :

.view {
  display: block;
}

.box {
    position: absolute;
    top: 0;
    bottom: 60px;
    left: 0;
    right: 0;
    height: auto;
    width: auto;
    border: 2px solid red;
    overflow: auto;
}
.view {
    height: 100%;
    width: 100%;
    display: block;
}

<div class='box'>
  <div class='view'></div>
</div>