如果Div的前一个Div是可见的并且高度是more，则Div不会滚动

Div does not getting scroll if it's previous div is visible and height is more

本文关键字：Div more 高度滚动如果一个更新时间：2023-09-26

在这里你可以看到div while有D1, D2…数据比div的大小大，所以理想情况下它应该有滚动条，但如果我点击过滤器链接比D1,D2…datadiv应该增加大小，这里我的数据是动态的，所以我不能为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>

看这小提琴

也许它能帮到你。

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

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

<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>