我想要.displayContainer中的.sideBar和.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>
解决方法
简答
您已经遇到了CSS中最狡猾的默认设置之一：vertical-align：baseline
将值切换到顶部,底部或中间,您应该全部设置.
说明
vertical-align属性的初始值(适用于内联级和表单元素)为基准.这允许浏览器在所谓下降器的元素之下提供空间.
在排版中,小写字母如j,g,p和y被称为descenders,因为它们违反了基线.
07002
The baseline is the line upon which most letters sit and below which descenders extend.
Source: 07003
由于默认情况下,所有内联级元素都是垂直对齐：基线,诸如按钮,输入,textarea,img之类的元素,和您代码中的内嵌块div一样,将从它们的底边稍微升高容器.
资料来源：Wikipedia.org
这个下降空间会增加容器内的高度,导致溢出并触发垂直滚动.
您可以通过滚动到demo的底部来看到下降空间.您会注意到子元素与底部边缘之间的小间隙.
以下是几种处理方法：
>覆盖vertical-align：baseline with vertical-align：bottom(或another value).>从display切换：inline-block显示：block.>在父级设置line-height：0.>在父项上设置一个font-size：0. (如有必要,您可以恢复孩子们的字体大小.)
