可滾動內容中的可滾動內容

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>