html - 溢出 :scroll doesn't fill div/changes div size

Question

我有这个代码:

<div style="position:absolute;left:0px;top:0px;width:17px;height:395px;background-color:white;border:1px solid black;">
<div style="position:inherit;;width:inherit;height:inherit;overflow:scroll;"></div>
<button style="position:absolute;left:0px;top:139px;width:17px;height:73px;background-color:white;border:1px solid black;"></button>
</div>

如果查看生成的 HTML，您会看到底部有一个未被滚动条填充的白色方 block 。这是怎么发生的？当我检查元素时，overflow:scroll div 没有 395px，而是 378px。当我将其更正为 395px 时，滚动条将在视觉上填充父 div，但会溢出。

这里发生了什么？

Answer 1

这只是水平 滚动条的空间。您可以通过增加元素宽度使其可见:

.bar {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 80px;
  height: 395px;
  background-color: white;
  border: 1px solid black;
}

.inner {
  position: inherit;
  width: inherit;
  height: inherit;
  overflow: scroll;
}

button {
  position: absolute;
  left: 0px;
  top: 139px;
  width: 17px;
  height: 73px;
  background-color: white;
  border: 1px solid black;
}

<div class="bar">
  <div class="inner"></div>
  <button></button>
</div>

您可以使用 overflow-y 来避免该空间而不是更一般的 overflow:

.bar {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 17px;
  height: 395px;
  background-color: white;
  border: 1px solid black;
}

.inner {
  position: inherit;
  width: inherit;
  height: inherit;
  overflow-y: scroll;
}

button {
  position: absolute;
  left: 0px;
  top: 139px;
  width: 17px;
  height: 73px;
  background-color: white;
  border: 1px solid black;
}

<div class="bar">
  <div class="inner"></div>
  <button></button>
</div>

一般来说，将样式与标记分开是个好主意。如果不使用内联样式，则更容易避免出现问题。