Jquery multiple append избегает увеличения размера окна

Я работаю над следующим примером, я добавляю html в div, в какой-то момент размер окна начинает увеличиваться, есть ли способ избежать этого?

пример

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

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

Чего вы ожидаете, когда продолжаете добавлять данные? Контент растет, потому что его больше. Что вы хотите?

— 19.06.2018 00:11

javascript jquery css html

19.06.2018 00:09

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 3

Я определил стиль для elDiv как 100px height и прокрутка, когда содержимое превышает высоту div:

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

Обновленная рабочий пример: https://jsfiddle.net/9rysbxw2/18/

19.06.2018 00:23

чтобы избежать этого поведения, я думаю, вы должны установить размер элемента и определить поведение переполнения. Таким образом, контент, добавленный в 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 -->

19.06.2018 00:24

я решил проблему, используя свойства стиля