如果父母和孩子的高度相同，为什么会有垂直滚动条？答案

【问题标题】：Why is there a vertical scroll bar if parent and child have the same height?如果父母和孩子的高度相同，为什么会有垂直滚动条？
【发布时间】：2016-08-26 18:00:29
【问题描述】：

我希望 .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

【问题讨论】：

标签： html css

【解决方案1】：

简答

您遇到了 CSS 中最隐秘的默认设置之一：vertical-align: baseline

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

说明

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

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

baseline

基线是大多数字母所在的线，下降线在其下方。

^{来源：Wikipedia.org}

由于默认情况下所有内联级元素都是vertical-align: baseline，因此button、input、textarea、img 等元素以及在您的代码中的inline-block div 等元素将从容器的底部边缘略微升高。

^{来源：Wikipedia.org}

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

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

这里有几种处理方法：

用vertical-align: bottom（或another value）覆盖vertical-align: baseline。
从display: inline-block 切换到display: block。
在父级上设置line-height: 0。
在父级上设置font-size: 0。（如有必要，您可以恢复孩子的字体大小。）

【讨论】：

谢谢！ - 我多年来一直在为此苦苦挣扎，发明了无数摇摇晃晃的解决方法。终于明白了
天哪，我一直用这个把头撞到墙上好几年了。万一它对其他人有帮助，我的设置是加载嵌套的 100% 大小的 div，并带有 display: flex;如果不求助于选项 3 或 4（我不想要级联效果），我这辈子都无法在第一个滚动 div 上修复它。最后发现我有一个 100% 大小的视频元素作为所有这些 div 的子元素，并在视频元素上设置 vertical-align: bottom; 完美修复了所有内容！！！

【解决方案2】：

我相信显示垂直滚动条的原因是因为有水平滚动条。因为水平侧边栏覆盖了每个div的部分底部，100%的div高度是看不到的，所以增加了垂直滚动条让你看到所有的内容。

如果在最后 20 像素左右没有任何内容（老实说确实不应该），那么 Dhaval 建议的解决方法（将溢出：隐藏；添加到您的 css）应该没问题。

如果您确实想一直查看内容，可以尝试使用绝对值或将 100% 更改为 99%

【讨论】：