Question

我有3个嵌套的div：

<div class="outer">
  <div class="inner"><div class="item"></div></div>
</div>

.inner div是绝对位置，每个都有1px边框：

.outer{
  width:50%;
  height:100px;
  border: 1px solid red;
  position:relative;
  overflow-x:hidden;
  box-sizing:border-box;
}
.inner{
  border:1px solid blue;
  height:100%;
  position: absolute;
  box-sizing: border-box;
}
.item{
  width:100px;
  height:100%;
  background-color:yellow;
  display: inline-block;
  border:1px solid green;
  box-sizing:border-box;
}

这种安排导致.outer div上的滚动条。

这里是codepen

为什么这样做以及我需要做些什么才能阻止它发生？

如果.inner div的边框宽度增加到3px，则滚动条会消失。再次，为什么会发生这种情况？

Answer 1

这种情况正在发生，因为您的.item元素设置为inline-block。这意味着它会受到line-height和vertical-align等内容的影响。

inline-block元素的默认垂直对齐方式是基线。这意味着它们被设置为出现在可能与其一起输入的任何文本的基线上。我不是100％肯定，但我认为这里可能存在一个问题，即在进行此计算时忽略box-sizing，并且基线最终比应该位置低2个像素（由于累积边框的2个像素应用于元素的顶部和底部。）

如果您希望以这种方式显示该元素，快速解决方法是将其vertical-align设置为top：

.item {
    ...
    vertical-align: top;
}

Codepen demo

Answer 2

最奇怪的是，如果你删除overflow-x:hidden;，滚动条会消失。原因是overflow的默认行为是visible，因此如果您不熟悉它，结果将不会是滚动条，但是设置{{1在某个值上，将overflow-x设置为overflow-y而不是默认值auto，结果会显示滚动条。

如果您将visible设置为overflow，则还会显示滚动条。

另一方面，auto设置为.item，因此它inline-block会产生底部的空格。将line-height设置为.inner会使空格消失，如果增加空间，它也会增加。

另一方面（第三方），您可以通过将line-height:0设置为.inner

来限制.inner中元素占用的空间

Answer 3

为什么在内部项目中使用inline-block？如果您更改为阻止，则滚动消失：

.item{
  width:100px;
  height:100%;
  background-color:yellow;
  display: block;
  border:1px solid green;
  box-sizing:border-box;
}

Answer 4

这是因为你的身高是100％然后你在每个div上添加1px的边框。工作演示：http://codepen.io/anon/pen/VvbNXp

所以你的.inner和.item类需要将高度改为：

height:calc(100% - 1px);

嵌套div生成滚动条。为什么？

4 个答案: