Question

HTML

<body>
  <div>
    <div>foo bar</div>
  </div>
</body>

CSS

body, html, div {
  height: 100%;
  margin: 0;
}
div div {
  display: inline-block;
  overflow: hidden;
}

为什么overflow: hidden会导致垂直滚动条？另外，为什么这个高度不归因于页面上的任何内容？这就像一个无形的边缘。

所有元素的100％高度是有意的。理论上，这应该导致最内部的div扩展以满足视口。它确实如此！ ......只要overflow: hidden不存在，为什么？

Answer 1

额外高度与vertical-align: baseline和vertical-align: bottom之间的高度差相同。 “下行线”。这就是看似随机的“5个额外像素”的来源。如果字体大小是10倍，那么这个间隙也将是10倍。

此外，似乎当overflow: hidden 不时，inline-block元素的基线与其最后一行文本的基线相同。

这让我相信overflow: hidden 强制整个inline-block元素的基线位于元素的底部。即使那里没有文本，inline-block元素的父级也为下行线保留空间。在问题中给出的示例中，由于inline-block元素的父级具有height: 100%，因此不容易看到。因此，为下行线保留的额外空间溢出了该父div。

为什么这个空间仍然存在，即使没有文字？我认为这是因为inline-block创建了一个内联格式化上下文，这是导致这个空间的原因。如果此元素为block，则只有在遇到内联元素或文本时才会创建此内联格式设置上下文。

这只是一个理论，但似乎可以解释它。它还解释了为什么@Jonny Synthetic的答案有效：添加溢出：隐藏到父级隐藏了额外的下行线。

感谢@Hashem Qolami jsbins给了我这个理论。

Answer 2

将overflow: hidden添加到父div不是我的选项，也是因为我的HTML结构不起作用。

但是，我注意到感谢@Tony Gustafsson在OP中的评论，这确实解决了问题：

div div {
    vertical-align: bottom;
}

Answer 3

高度为100％的项目也需要溢出：隐藏。第一个css规则仅针对外部div，隐藏的溢出应用于内部div。

Jsfiddle与这个CSS，它运作良好：

body, html, div {
    height: 100%;
    margin: 0px;
    padding:0px;
    overflow: hidden;
}
div div {
    display: inline-block;
    overflow: hidden;
}

为什么overflow：hidden会为内联块元素添加额外的高度？

HTML

CSS

3 个答案: