Изотоп с Bootstrap 3 и Sticky Footer

Я использую изотоп, чтобы представить сетку изображений в рамках рамки Bootstrap 3. У меня есть липкий нижний колонтитул (с использованием рекомендуемого абсолютного позиционирования с нижним значением 0).Изотоп с Bootstrap 3 и Sticky Footer

Когда окно браузера уменьшено в высоту, div, содержащий изображения изотопа-d, не останавливается там, где начинается липкий нижний колонтитул - поэтому самое нижнее 60px div (фактическое количество зависит от высоты, установленной для нижнего колонтитула) скрывается нижним колонтитулом ИЛИ проходит ниже нижнего колонтитула. Разница определяется, устанавливаю ли я высоту для контейнеров div.

Вот HTML от https://codepen.io/marklsanders/pen/KrRVaK:

the codepen contains an example

Я предполагаю, что проблема вызвана тем, что все изображения, расположенные на Изотоп позиционируются абсолютно. Любые предложения относительно того, как правильно работать с этим?

благодаря

источник

2016-07-23 Mark Sanders

Попробуйте изменить колонтитул от position: absolute; к position: fixed;, и добавить к вашему padding-bottom: 75px;<body>.

Имейте в виду, что когда вы устанавливаете абсолютный или фиксированный, этот элемент удаляется из обычного потока документа. Когда вы разместите его, он, скорее всего, столкнется с другим статически позиционированным элементом.

В этом случае добавление прокладки к телу «имитирует» в обычном документе пространство, которое фактически занято нижним колонтитулом.

Дополнительное примечание. Подход с липким нижним колонтитулом обычно означает, что вам нужно установить фиксированную высоту для нижнего колонтитула. Я использовал 75px для заполнения на теле, но вы можете поиграть с этим для достижения наилучших результатов.

источник

2016-07-23 15:42:47 Toby

Большое спасибо. Отлично. я иногда забываю об основах :) –

ответ

Смежные вопросы