html - parent 和 child 高度相同，为什么会有垂直滚动条？

Question

我希望我的 .sideBar 和 .contentHolder 元素在 .displayContainer 中。

问题是 .displayContainer 渲染了一个不必要的垂直滚动条。水平滚动条可以，但垂直滚动条就没必要了。

我检查并发现 .displayContainer 和子元素具有相同的计算高度。那为什么会有垂直滚动条呢？

谁能告诉我如何删除它？

body, html {
  margin: 0px;
  padding: 0px;
  border: 0px;
  height: 100%;
  width: 100%;
}
.displayContainer {
  height: 100%;
  width: 100%;
  overflow: auto;
  white-space: nowrap;
}
.sideBar {
  background-color: green;
  display: inline-block;
  width: 20%;
  height: 100%;
}
.contentHolder {
  background-color: red;
  display: inline-block;
  width: 100%;
  height: 100%;
}

<div class="displayContainer">
  <div class="sideBar"></div>
  <div class="contentHolder"></div>
</div>

jsFiddle

Answer 1

简答

您遇到了 CSS 中最狡猾的默认设置之一:vertical-align: baseline

将值切换为top、bottom 或middle，您应该已准备就绪。

---

解释

适用于行内级和表格单元格元素的 vertical-align 属性的初始值为 baseline。这允许浏览器在元素下方为所谓的descenders 提供空间。

在排版中，j、g、p 和 y 等小写字母被称为 descenders，因为他们违反了基线。

baseline

The baseline is the line upon which most letters sit and below which descenders extend.

^{Source: Wikipedia.org}

由于所有行内级元素默认都是vertical-align: baseline，button、input、textarea、img 和在您的代码中一样，inline-block div 将从其容器的底部边缘稍微升高。

^{来源:Wikipedia.org}

这个下行空间增加了容器内部的高度，这会导致溢出并触发垂直滚动。

您可以通过滚动到 demo 的底部来查看下降空间。您会注意到子元素和底部边缘之间的小间隙。

这里有几种处理方法:

1. 用 vertical-align: bottom(或 another value)覆盖 vertical-align: baseline。

2. 从 display: inline-block 切换到 display: block。

3. 在父级上设置一个line-height: 0。

4. 在父级上设置一个font-size: 0。 (如有必要，您可以恢复 child 的字体大小。)