带溢出卷轴的3个div不适合页面最大高度100％

Question

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


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

我很难让它发挥作用。
例如＆＃34; title2＆＃34;应该是溢出滚动，但它不断溢出其父。不适合页面最大高度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>

Answer 2

希望我做对了。 做了jsfiddle

只需将max-height:30%替换为max-height:33vh

Answer 3

试试这个，我希望这对你有用，这是fiddle https://jsfiddle.net/cbjkc4dg/4/

用div这样的

包装每个块

 <div class="block">
   <h2>title1</h2>
   <div id="div1">
     <div>row</div>
     <div>row</div>
     <div>row</div>
     <div>row</div>
   </div>
 </div>

对于样式，您可以为主父块设置100vh，这样它的父母也可以灵活使用它。喜欢这里

body,
html {
 overflow: hidden;
}

#content {
 height: 100vh;
}

.block {
 height: calc(100vh / 3);
 overflow: hidden;
}

#div1,
#div2,
#div3 {
 background: #fff;
 overflow-y: scroll;
  height: calc(100% - 37px);
}