css - 3 个带溢出滚动的 div 不适合页面最大高度 100%

Question

body,html{
  max-height:100vh;
}
#content{
  max-height:100%;
}


#div1,#div2,#div3{
  background:#fff;
  overflow-y:scroll;
  max-height: 30%;
}

我很难让它发挥作用。
例如“title2”应该是溢出滚动但它一直溢出它的父级。不适合页面最大高度 100%。

https://jsfiddle.net/cbjkc4dg/1/

Answer 1

不幸的是，如果将高度设置为百分比，overflow: scroll 将无法工作，正如您所做的那样。一种解决方案是改用 vh 单位，在调整大小时，它的工作方式与 % 非常相似。

这是一篇关于什么是vh的好文章

http://thenewcode.com/660/Using-vw-and-vh-Measurements-In-Modern-Site-Design

这里有一个片段来演示:

body,
html {
  max-height: 100vh;
}
#content {
  max-height: 100%;
}
#div1,
#div2,
#div3 {
  background: #fff;
  overflow-y: scroll;
  max-height: 30vh;
}

<div id="content">
  <h2>
title1
</h2>
  <div id="div1">
    <div>row</div>
    <div>row</div>
    <div>row</div>
    <div>row</div>
  </div>
  <h2>
title2
</h2>
  <div id="div2">
    <div>row</div>
    <div>row</div>
    <div>row</div>
    <div>row</div>
    <div>row</div>
    <div>row</div>
    <div>row</div>
    <div>row</div>
    <div>row</div>
    <div>row</div>
    <div>row</div>
    <div>row</div>
    <div>row</div>
    <div>row</div>
    <div>row</div>
    <div>row</div>
    <div>row</div>
    <div>row</div>
    <div>row</div>
    <div>row</div>
    <div>row</div>
    <div>row</div>
    <div>row</div>
    <div>row</div>
    <div>row</div>
    <div>row</div>
    <div>row</div>
    <div>row</div>
    <div>row</div>
    <div>row</div>
    <div>row</div>
    <div>row</div>
  </div>
  <h2>
title3
</h2>
  <div id="div3">
    <div>row</div>
    <div>row</div>
    <div>row</div>
    <div>row</div>
  </div>
</div>