CSS: переполнение динамически создаваемого контента

javascript jquery html css

48 просмотра

2 ответа

Я пытаюсь динамически обновить элементы изначально с макетом, как это:

введите описание изображения здесь

Теперь приложение включает в себя взаимодействие какой-то кнопки для обновления содержимого раздела « Маленький контент» :

скрипт при нажатии кнопки:

$.ajax({    //some ajax request upon button click
      success: function(result){
      $('#small-content').append(result);
      }
});

Это происходит при нажатии кнопки, выполняется запрос и результаты динамически добавляются в # small-content div, но это приводит к следующему:

введите описание изображения здесь

Как мне исправить это таким образом, чтобы он сдвигал нижний колонтитул, а не перекрывал его? Обратите внимание, что я в любом случае не могу изменить CSS нижнего колонтитула, так как он был представлен глобально.

Автор: muffin Источник Размещён: 08.11.2019 11:04

Ответы (2)


0 плюса

Я думаю, что вы исправите свой макет, если добавите дополнительный блок после # small-content с размером, равным #footer. Но это будет работать, только если нижний колонтитул имеет фиксированный размер .

Что-то вроде этого

<div id="small-content"><!-- some content --></div>
<div id="footer-separator" class="footer-separator"><!-- empty block --></div>
<div id="footer" class="footer"><!-- some content --></div>

И стили

.footer-separator {
   height: 100px; 
   ....
}

.footer {
   height: 100px; 
   ....
}
Автор: Kison Размещён: 20.08.2016 08:54

0 плюса

Попробуйте добавить свойство margin-top в #footer. Так что это будет поддерживать расстояние между # small-content и #footer во всех случаях.

Автор: bhattshru Размещён: 20.08.2016 09:01
Вопросы из категории :
32x32