为什么父母和孩子有相同的高度,有一个垂直滚动条?

我想要.sideBar里面的.displayContainer.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

将值切换到topbottommiddle ,并且应该全部设置。


说明

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

在印刷术中,小写字母(如jgpy)被称为下行字符,因为它们违反了基线。

底线

基线是大多数字母所在的线路,在下面延伸。

在这里输入图像描述

来源: Wikipedia.org

由于默认情况下,所有内联级元素都是vertical-align: baseline ,像buttoninputtextareaimg等元素,就像代码中的inline-block div一样,将从它们的底部边缘略微提升容器。

在这里输入图像描述

来源: Wikipedia.org

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

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

这里有几种方法来处理这个问题:

  1. 使用vertical-align: bottom (或其他值 )覆盖vertical-align: baseline

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

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

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

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

如果在最后20px左右没有什么东西(说实话不应该这样做),那么围绕这个Dhaval所做的工作(添加溢出:隐藏到你的CSS)应该没问题。

如果您确实希望一路查看内容,则可以尝试使用绝对值或仅更改100%至99%