HTML如何獲得帶有變量的div內容上的滾動條？

Question

我努力讓滾動條下面的場景：

父DIV 1（固定高度200像素） - 無滾動條
- 兒童DIV 1（最大高度100像素 - 內容從空變化到最大） - 應該有滾動條如果需要
- 兒童DIV 2（身高= 1區 - Child1高度） - 如果需要的話

應該有滾動條，這是我的嘗試：

#body { 
 
    position: absolute; 
 
    height: 300px; 
 
    width: 500px; 
 
    border: black dashed 2px; 
 
} 
 
#head { 
 
    border: green solid 1px; 
 
} 
 
#content { 
 
    border: red solid 1px; 
 
    overflow-y: auto; 
 
    height: 200px; 
 
} 
 
#content { 
 
    border: red solid 1px; 
 
    overflow-y: in; 
 
    height: 200px; 
 
} 
 
#content1 { 
 
    border: red solid 1px; 
 
    overflow-y: auto; 
 
    max-height: 100px; 
 
} 
 
#content2 { 
 
    border: red solid 1px; 
 
    overflow-y: scroll; 
 
} 
 
#foot { 
 
    border: blue solid 1px; 
 
    height: 50px; 
 
}

<div id="body"> 
 
    <div id="head"> 
 
    <p>Dynamic size without scrollbar</p> 
 
    <p>Dynamic size without scrollbar</p> 
 
    <p>Dynamic size without scrollbar</p> 
 
    </div> 
 
    <div id="content"> 
 
    <div id="content1"> 
 
     <p>Dynamic size with scrollbar</p> 
 
     <p>Dynamic size with scrollbar</p> 
 
     <p>Dynamic size with scrollbar</p> 
 
     <p>Dynamic size with scrollbar</p> 
 
     <p>Dynamic size with scrollbar</p> 
 
     <p>Dynamic size with scrollbar</p> 
 
     <p>Dynamic size with scrollbar</p> 
 
     <p>Dynamic size with scrollbar</p> 
 
     <p>Dynamic size with scrollbar</p> 
 
    </div> 
 
    <div id="content2"> 
 
     <p>Dynamic size with scrollbar</p> 
 
     <p>Dynamic size with scrollbar</p> 
 
     <p>Dynamic size with scrollbar</p> 
 
     <p>Dynamic size with scrollbar</p> 
 
     <p>Dynamic size with scrollbar</p> 
 
     <p>Dynamic size with scrollbar</p> 
 
     <p>Dynamic size with scrollbar</p> 
 
     <p>Dynamic size with scrollbar</p> 
 
     <p>Dynamic size with scrollbar</p> 
 
     <p>Dynamic size with scrollbar</p> 
 
     <p>Dynamic size with scrollbar</p> 
 
     <p>Dynamic size with scrollbar</p> 
 
     <p>Dynamic size with scrollbar</p> 
 
     <p>Dynamic size with scrollbar</p> 
 
    </div> 
 
    </div> 
 
    <div id="foot"> 
 
    <p>Fixed size without scrollbar</p> 
 
    <p>Fixed size without scrollbar</p> 
 
    </div> 
 
</div>

View on JSFiddle

Answer 1

沒有高度設爲您的內容2格。這就是爲什麼沒有滾動條。它應該有一些特定的高度設置。