Question

我一直在研究下一个例子，我将html添加到div中，在某些时候窗口的大小开始增加，有没有办法避免这种情况？

＆＃13;

$(document).ready(function() {
  $('#b').click(function() {
    $('#elDiv').append('<br><strong>Hello</strong><br>');
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>I would like to say: </p>
<button id="b">click now</button>
<div id="elDiv"></div>

＆＃13;

Answer 1

我将elDiv的样式定义为100px height，并在内容超出div的高度时滚动：

.myclass{
  height: 100px;
  overflow: auto;
}

更新了小提琴：https://jsfiddle.net/9rysbxw2/18/

Answer 2

要避免这种行为，我认为您应该为元素设置大小并定义溢出行为。因此，添加到div中的内容将保留在其中。这是对代码示例的修改：

$('#b').click(function(){
    $( '#elDiv').append('<br><strong>Hello</strong><br>');
});

<p>I would like to say: </p>
 <button id="b">click now
 </button>
<div id="elDiv" style="height:100px; overflow: auto;">
</div>
<!-- NOTICE THE OVERFLOW PROPERTIE I ADDED AND THE FIXED HEIGHT -->

Answer 3

我使用样式属性

解决了这个问题

position: absolute;
top: 20px;

这样我可以在任何位置添加多个div而不增加屏幕尺寸

example

jquery multiple append避免增加窗口大小

3 个答案: