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

Question

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

这是一个我想要的例子:http://jsfiddle.net/hmwe2jty/

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

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技巧的文章

编辑2:

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