为什么 overflow-y 属性不适用于百分比高度

Question

我正在尝试对 overflow-y:auto; 使用百分比高度，而不是在 div 的一侧创建滚动条，而是使用页面滚动条。

是否可以使用此属性百分比高度？

Answer 1

TL;DR 使用视口 height/width 而不是百分比。将 100% 更改为 100vh，大功告成！

编辑：

百分比取父元素的百分比。例如：

console.log("Parent's width: " + document.getElementById("parent").offsetWidth);
console.log("Child's width: " + document.getElementById("child").offsetWidth);

#parent {
  background: yellow;
  width: 500px;
  height: 150px;
}

#child {
  background: orange;
  width: 50%;
  height: 100px;
}

<div id="parent">
  <div id="child">
    I am 250px wide!
  </div>
</div>

新的 CSS3 视口单位使用用户的视口作为基础。例如：

console.log("Parent's width: " + document.getElementById("parent").offsetWidth);
console.log("Child's width: " + document.getElementById("child").offsetWidth);

#parent {
  background: yellow;
  width: 500px;
  height: 150px;
}

#child {
  background: orange;
  width: 50vw;
  height: 100px;
}

<div id="parent">
  <div id="child">
    My width is 50% of the user's viewport, regardless of the size of my parent!
  </div>
</div>

因为 body 元素有点奇怪，它的默认行为是缩小以适应内容。所以：

body {
  background: yellow;
  border: 1px solid red;
}

The body element wraps around it contents, <br>
but the backgound just ignores this behaviour.

因此，由于父元素是主体，您将需要使用新的 vw 和 vh 单位。阅读关于 CSS Tricks

的文章

编辑 2：

选择视口作为父视口的另一种方法是使元素的位置为 fixed 或 absolute。在那种情况下，父级将成为视口，从而为您提供所需的值。

Answer 2

正在考虑 100% 的父项，即正文。因此它占据了完整space可用的高度。以 % 而非 100 为单位指定较小的高度（如果您特别喜欢百分比）。由你决定。

Answer 3

将此 css 用于 div，其高度必须以父元素的百分比表示：

  .child {
    position: absolute;
    top: 10px;
    bottom: 0px;
  }

为什么 overflow-y 属性 不适用于百分比高度

Why Does The overflow-y Property Not Work With Percent Height

css

height

overflow

编辑：

编辑 2：

为什么 overflow-y 属性不适用于百分比高度