为什么父母和孩子有相同的高度，有一个垂直滚动条？
我想要.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
将值切换到top ， bottom或middle ，并且应该全部设置。
说明
vertical-align属性的初始值（适用于内联级别表格单元格）是baseline 。 这允许浏览器为所谓的下行提供元素下的空间。
在印刷术中，小写字母（如j ， g ， p和y）被称为下行字符，因为它们违反了基线。
底线
基线是大多数字母所在的线路，在下面延伸。
来源： Wikipedia.org
由于默认情况下，所有内联级元素都是vertical-align: baseline ，像button ， input ， textarea ， img等元素，就像代码中的inline-block div一样，将从它们的底部边缘略微提升容器。
来源： Wikipedia.org
这个下降空间在容器内部增加了高度，这导致溢出并触发垂直滚动。
您可以通过滚动到演示底部来查看下拉空间。 你会注意到子元素和底边之间的小差距。
这里有几种方法来处理这个问题：
-
使用
vertical-align: bottom（或其他值 ）覆盖vertical-align: baseline。 -
从
display: inline-block切换到display: block。 -
在父级上设置一个
line-height: 0。 -
在父级上设置一个
font-size: 0。 （如有必要，您可以恢复孩子的字体大小。）
我相信垂直滚动条显示的原因是因为有水平滚动条。 由于水平边栏覆盖了每个div的一些底部，因此无法看到div高度的100％，因此它会添加垂直滚动条以使您看到所有内容。
如果在最后20px左右没有什么东西（说实话不应该这样做），那么围绕这个Dhaval所做的工作（添加溢出：隐藏到你的CSS）应该没问题。
如果您确实希望一路查看内容，则可以尝试使用绝对值或仅更改100％至99％
