如果之前的div是可见的并且高度更高，则Div不会滚动

Question

在这里你可以看到div虽然有D1，D2 ......数据大于div的大小，所以理想情况下它应该有滚动条，但是如果我点击Filter链接比D1，D2 ..数据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>

Answer 1

看看这个fiddle。

也许它可以帮到你。

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

如果按顶部和底部修复#data div，则会显示滚动。

Answer 2

＆＃13;

＆＃13;

$(document).ready(function(){
    $("#filter-text").click(function(){
        $("#filter-option").toggle();
    });
});

＆＃13;

<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;">
            <div id="parent" style="position:relative; height:100%;">
                
                <div id="filter" style="border:1px solid #00FF00;position:relative;overflow:auto; /*height:20%;*/">
                    <div id="filter-text" style="cursor:pointer; color:#0000ff;" >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; height:80%;">
                    <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 sytle="clear:both"></div>
            </div>
        </div>

＆＃13;

＆＃13;

＆＃13;