如果父母和孩子的身高相同,为什么会出现垂直滚动条？

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.这允许浏览器在所谓的下行器的元素下方提供空间.

在排版中,j,g,p和y等小写字母称为下降字符,因为它们会破坏基线.

底线

基线是大多数字母所在的线和下方延伸的线.

^{来源:Wikipedia.org}

是所有的行内元素,默认情况下vertical-align: baseline,元素,如button,input,textarea,img,就像在你的代码,inline-blockdiv的,会稍微从容器的底部边缘升高.

^{来源:Wikipedia.org}

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

您可以通过滚动到演示的底部来查看下降空间.你会注意到子元素和底边之间的小差距.

以下是处理此问题的几种方法:

1. 重写vertical-align: baseline与vertical-align: bottom(或其他值).

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

3. line-height: 0在父级上设置a .

4. font-size: 0在父级上设置a .(如有必要,可以恢复子项的字体大小.)