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，您会看到底部的滚动条没有填充白色方块。这是怎么发生的？当我检查元素时，overflow：scroll div没有395px，而是378px。当我将其更正为395px时，滚动条将在视觉上填充父div，但会出现溢出。

这里发生了什么？

Answer 1

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

您可以使用overflow-y代替更一般的overflow来避开该空格：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

一般来说，从标记中分离样式是个好主意。如果不使用内联样式，则更容易避免问题。

溢出：滚动不填充div /更改div大小

1 个答案: