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

Question

我想要.sideBar内的.contentHolder和.displayContainer元素。

问题是.displayContainer呈现不必要的垂直滚动条。水平滚动条没问题，但不需要垂直滚动条。

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

有谁能告诉我如何删除它？

＆＃13;

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

jsFiddle

Answer 1

简答

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

将值切换为top，bottom或middle，您应该全部设置。

说明

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

在排版中，小写字母，例如 j ， g ， p 和 y 被称为{{ 3}}因为它们违反了基线。

  

descenders

     

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

     

     

^{来源：baseline}

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

Wikipedia.org

^来源：

此下降空间会在容器内部增加高度，从而导致溢出并触发垂直滚动。

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

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

1. 使用vertical-align: baseline（或demo）覆盖vertical-align: bottom。

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

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

4. 在父级上设置font-size: 0。 （如有必要，您可以恢复孩子的字体大小。）

Answer 2

我认为垂直滚动条显示的原因是因为有水平滚动条。由于水平侧边栏覆盖了每个div的一些底部，因此无法看到100％的div高度，因此它会添加垂直滚动条以让您查看所有内容。

如果在最后20px左右没有任何东西（说实话，那真的不应该），那么Dhaval的工作建议（添加溢出：隐藏;给你的css）应该没问题。

如果你想看到内容一直向下，你可以尝试使用绝对值或只是改变100％到99％