javascript - 如果上一个div可见并且高度更高，则div不会滚动(Div does not getting scroll if it's previous div is visible and height is more)

Question

Here you can see that div while has D1, D2... data is large than the size of the div, so ideally it should have the scroll bar, but if I click on the Filter link than D1,D2... data div should increase the size, Here my data is dynamic so I can not specify any height to DIV,

(在这里，您可以看到div虽然具有D1，D2 ...数据大于div的大小，所以理想情况下它应该具有滚动条，但是如果我单击Filter链接，则比D1，D2 ... data div应该增加大小，这里我的数据是动态的，所以我不能指定DIV的任何高度，)

 $(document).ready(function(){ $("#filter-text").click(function(){ var a = $("#filter-option").toggle(); if(a.css("display")=="block"){ $("#data").css("height","80%"); }else{ $("#data").css("height","96%"); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <div style="width:500px;height:500px;background-color:#efefef;position:absolute;"> <div id="parent" style="position:relative;"> <div id="filter" style="border:1px solid #00FF00;float:left;overflow:auto;width:100%;"> <div id="filter-text" style="cursor:pointer; color:#0000ff;height:4%;" >Filter</div> <div id="filter-option" style="height:80px;"> This should be hide on clicking of filter </div> </div> <div id="data" style="border:1px solid #0000FF;overflow:auto;float:left;width:100%;max-height:80%;position:relative;"> <table> <tr><td>This div must have scroll bar if its height is higher than parent</td></tr> <tr><td>D1</td></tr> <tr><td>D2</td></tr> <tr><td>D3</td></tr> <tr><td>D4</td></tr> <tr><td>D5</td></tr> <tr><td>D6</td></tr> <tr><td>D7</td></tr> <tr><td>D8</td></tr> <tr><td>D9</td></tr> <tr><td>D10</td></tr> <tr><td>D11</td></tr> <tr><td>D12</td></tr> <tr><td>D13</td></tr> <tr><td>D14</td></tr> <tr><td>D15</td></tr> <tr><td>D16</td></tr> <tr><td>D17</td></tr> <tr><td>D18</td></tr> <tr><td>D19</td></tr> <tr><td>D20</td></tr> </table> </div> </div> </div> 

  ask by Alpesh Jikadra translate from so

Answer 1

Look at this fiddle .

(看看这个小提琴 。)

Maybe it can help you.

(也许可以帮到您。)

 <div id="data" style="border:1px solid #0000FF;overflow:auto;position:absolute;bottom:0;top:100px;">

If you fix #data div by top and bottom, scroll will show.

(如果按顶部和底部固定#data div，将显示滚动。)