Содержание нижнего колонтитула при изменении размера

0

Я создал липкий нижний колонтитул, и, похоже, он находится внизу страницы. Единственная проблема заключается в том, что когда я сворачиваю свой браузер, перетаскивая нижнюю часть браузера, содержимое выше перекрывается с нижним колонтитулом. Содержимое div содержит изображения, которые находятся на верхней части нижнего колонтитула, когда я минимизирую. Также тип над нижним колонтитулом появляется над изображениями (при минимизации). Любая помощь будет оценена по достоинству. Спасибо.

<----- Структура HTML →

<div class="supercontainer"

    <div class="nav"></div>

    <div class="wrapper">

    <div class="content"></div>
    <div class="push"></div>

    </div>

    </div>

    <div class="footer"></div>

<----- Соответствующие CSS -→

.supercontainer {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
  position: relative;
  }

.footer {
   background-color: black;
   width: 100%;
   height: 100px;
 }
  .push {
  height: 100px;
}
  • 0
    Я не смог воспроизвести проблему, рассмотрите возможность предоставления онлайн-демонстрации, чтобы продемонстрировать проблему в действии.
Теги:
footer

1 ответ

0

Чтобы получить содержание, чтобы вытащить нижний колонтитул, вам нужно указать значение div отрицательного нижнего поля, которое соответствует высоте нижнего колонтитула.

.supercontainer {
   min-height: 100%;
   height: auto !important;
   height: 100%;
   margin: 0 auto -100px;
   position: relative;
  }

.footer {
   background-color: black;
   width: 100%;
   height: 100px;
 }

http://css-tricks.com/snippets/css/sticky-footer/

  • 0
    Привет, Колин, спасибо за твой ответ. Возможно я не был ясен в своем посте. Я пытаюсь заставить мой колонтитул работать так же, как и в примере с Ашемом. Я думаю, что я, возможно, понял, в чем проблема .... У меня был div контента, установленный на 100vh, который вызывал наложение по какой-то причине?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню