可滚动内容中的可滚动内容

Question

我想知道我是否可以将可滚动内容放入可滚动内容中。我有这样的事情：

<div style="overflow-y: auto; padding: 10px"> 
 
    <div layout="column"> 
 
     <h3 style="margin: 5px">Header 1</h3> 
 
     <h3 style="margin: 5px">Header 2</h3> 
 
    </div> 
 
    <div layout="column" layout-align="center center" style="height: 100%"> 
 
     <div layout="column" layout-align="center center" style="width: 70%; height: 100%; overflow-y: auto"> 
 
      <div layout="column" style="width: 100%"> 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

到目前为止，我只能得到外层div滚动。有没有办法让两个滚动（没有设置特定的像素高度）？

Answer 1

如果父容器的高度为100％ - 您将不会有任何滚动条，并且如果它的子元素为70％（如果它是父级），则同样在那里。

如果使父容器固定高度，你将有他们两个滚动：

<div style="overflow-y: auto; padding: 10px; border: 1px solid red; height: 500px;"> 
 
    <div layout="column"> 
 
     <h3 style="margin: 5px">Header 1</h3> 
 
     <h3 style="margin: 5px">Header 2</h3> 
 
    </div> 
 
    <div layout="column" layout-align="center center" style="height: 100%"> 
 
     <div layout="column" layout-align="center center" style="width: 70%; height: 100%; overflow-y: auto;border: 1px solid blue;"> 
 
      <div layout="column" style="width: 100%"> 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

如果你不想使用特定的像素可以使用vh代替（视口高度）

<div style="overflow-y: auto; padding: 10px; border: 1px solid red; height: 100vh;"> 
 
    <div layout="column"> 
 
     <h3 style="margin: 5px">Header 1</h3> 
 
     <h3 style="margin: 5px">Header 2</h3> 
 
    </div> 
 
    <div layout="column" layout-align="center center" style="height: 100%"> 
 
     <div layout="column" layout-align="center center" style="width: 70%; height: 100%; overflow-y: auto;border: 1px solid blue;"> 
 
      <div layout="column" style="width: 100%"> 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
       This content could be any height but should start scrolling when it 
 
       gets larger than parent div 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>