html – 如果父母和孩子的高度相同,为什么会有垂直滚动条？

我想要.displayContainer中的.sideBar和.contentHolder元素.

问题是.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

解决方法

简答

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

将值切换到顶部,底部或中间,您应该全部设置.

说明

vertical-align属性的初始值(适用于内联级和表单元素)为基准.这允许浏览器在所谓下降器的元素之下提供空间.

在排版中,小写字母如j,g,p和y被称为descenders,因为它们违反了基线.

07002

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

^{Source: 07003}

由于默认情况下,所有内联级元素都是垂直对齐：基线,诸如按钮,输入,textarea,img之类的元素,和您代码中的内嵌块div一样,将从它们的底边稍微升高容器.

资料来源：Wikipedia.org

这个下降空间会增加容器内的高度,导致溢出并触发垂直滚动.

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

以下是几种处理方法：

>覆盖vertical-align：baseline with vertical-align：bottom(或another value).>从display切换：inline-block显示：block.>在父级设置line-height：0.>在父项上设置一个font-size：0. (如有必要,您可以恢复孩子们的字体大小.)