Прокручиваемый контент внутри прокручиваемого содержимого

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>