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

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>

Answer 1

我相信显示垂直滚动条的原因是因为有水平滚动条。由于水平侧边栏覆盖了每个div的某些底部，因此无法看到div高度的100％，因此它添加了垂直滚动条以让您查看所有内容。如果最后20像素左右没有任何东西（老实说应该没有），那么Dhaval建议的解决方法（将溢出：隐藏；添加到CSS中）应该可以。如果您确实希望完全看到内容，可以尝试使用绝对值或将100％更改为99％