为了账号安全,请及时绑定邮箱和手机立即绑定

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

/ 猿问

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

拉莫斯之舞 2019-11-19 15:20:29

我希望将我.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>


查看完整描述

2 回答

?
缥缈止盈

简短答案

您遇到了CSS中最偷偷摸摸的默认设置之一: vertical-align: baseline


将值切换为top,bottom或middle,就可以完成所有设置。


说明

vertical-align适用于内联级别和表格单元元素的属性的初始值为baseline。这使浏览器可以在元素下方提供用于所谓的“ 下降子”的空间。


在排版中,小写字母(例如j,g,p和y)被称为降序字母,因为它们违反了基线。


基准线


基线是大多数字母所在的行,而其下级延伸到其下方。


资料来源:Wikipedia.org


是所有的行内元素,默认情况下vertical-align: baseline,元素,如button,input,textarea,img,就像在你的代码,inline-blockdiv的,会稍微从容器的底部边缘升高。


资料来源:Wikipedia.org


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


滚动到演示的底部,可以看到下降空间。您会注意到子元素和底部边缘之间的缝隙很小。


以下是几种处理方法:


vertical-align: baseline用vertical-align: bottom(或另一个值)覆盖。


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


line-height: 0在父项上设置一个。


font-size: 0在父项上设置一个。(如果需要,您可以在子代上恢复字体大小。)


查看完整回答
反对 回复 2019-11-19
?
大话西游666

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

如果最后20像素左右没有任何东西(老实说应该没有),那么Dhaval建议的解决方法(将溢出:隐藏;添加到CSS中)应该可以。

如果您确实希望完全看到内容,可以尝试使用绝对值或将100%更改为99%


查看完整回答
反对 回复 2019-11-19

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信