为啥溢出-y 属性不适用于百分比高度

Posted 2023-03-06

【中文标题】为啥溢出-y 属性不适用于百分比高度

【英文标题】：Why Does The overflow-y Property Not Work With Percent Height为什么溢出-y 属性不适用于百分比高度

【发布时间】：2015-07-20 10:36:02

【问题描述】：

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

这是我想要的示例：http://jsfiddle.net/hmwe2jty/

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

【参考方案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。在这种情况下，父级将成为视口，从而为您提供所需的值。

【讨论】：

我认为某些版本的 safari 不支持 vh。我在使用 vh 时遇到了 ipad 的问题。

【参考方案2】：

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

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

【参考方案3】：

它正在考虑 100% 的父母，也就是身体。因此它占据了可用空间的高度。以 % 而不是 100（如果您特别喜欢百分比）指定更少量的高度。由你决定。