编辑：

Question

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

是否可以将此属性与百分比高度一起使用？

Answer 1

TL; DR 使用视口高度/宽度而不是百分比。改变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％的父母，即身体。因此它占据了完整空间的高度。以％表示高度而不是100表示高度（如果您特别喜欢百分比）。这取决于你选择的内容。

Answer 3

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

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

为什么overflow-y属性不能与百分比高度一起使用

3 个答案:

编辑：

编辑2：