Липкий нижний колонтитул с фоновым изображением - PullRequest
Новая
       8

Липкий нижний колонтитул с фоновым изображением

0 голосов
/ 31 октября 2019

У меня есть нижний колонтитул в теле, который должен быть прикреплен к нижней части страницы (не фиксируется и всегда на странице). Я думаю, что это называется липкий колонтитул. Похоже, что это происходит только на страницах, где содержание на странице не распространяется очень далеко по вертикали. Однако на некоторых страницах есть пробел ниже нижнего колонтитула, например так:

screenshot

Я сделал фон оранжевым, чтобы вы могли видеть, где находится нижний колонтитулна этой странице.

На другой странице это выглядит так (правильно:

screenshot 2

Мне интересно, как я могисправьте это, или если бы был лучший способ спроектировать нижний колонтитул - я не писал его изначально.

Вот HTML, который находится внутри элемента body: 

<footer class="main-footer">
        <div class="container">
            <ul class="links">
                <li><a href="link1">stuff1</a></li>
                <li><a href="link2">stuff2</a></li>
                <li><a href="link3">stuff3</a></li>
                <li><a href="link4">stuff4</a></li>
            </ul>
        </div>
    </footer>

Примечаниечто тело отображается с @RenderBody() с нижним колонтитулом, следующим после.

и вот CSS: 

.main-footer {

    background-image: url("images/footer-background.png");
    background-size: cover;
    background-position: initial;
    background-repeat: no-repeat;
    background-color: #ffffff;
    z-index: 10;
    padding-top: 2%;
    left: 0;
    color: #fff;
    text-align: right;
    height:190px;
    bottom:0;
}


  .main-footer .links {
    padding: 0;
      margin-top: 100px;
    list-style: none; }
    .main-footer .links li {
      display: inline-block; }
      @media only screen and (max-width: 768px) {
        .main-footer .links li {
          display: block;
          margin-bottom: 5px; } }
      .main-footer .links li:not(:last-child) {
        margin-right: 15px; }
  .main-footer a {
    color: inherit;
    font-weight: 200; }
  .main-footer.logged-in {
    position: static;
    background: #fff;
    padding: 30px 0;
    border-top: 1px solid #D8D8D8; }
    @media only screen and (max-width: 1040px) {
      .main-footer.logged-in {
        margin-top: 0; } }
    .main-footer.logged-in a, .main-footer.logged-in * {
      color: #999999; }
  .main-footer.logged-out {
    position: static;
    background: #fff;
    padding: 30px 0;
    border-top: 1px solid #D8D8D8; }
    @media only screen and (max-width: 1040px) {
      .main-footer.logged-out {
        margin-top: 0; } }
    .main-footer.logged-out a, .main-footer.logged-in * {
      color: #999999; }

body.content-tall .main-footer {
  position: relative;
  bottom: auto;
  margin-top: 30px; }

Я рад предоставить дополнительную информацию, если это поможет

РЕДАКТИРОВАТЬ: Я сузил его до margin-top in: 

  .main-footer .links {
    padding: 0;
      margin-top: 100px;

, что вызывает проблему. Однако я не могу удалить верхнее поле, так как это необходимо для форматирования текста по вертикали настраница (не показана на скриншоте). Я пробовал overflow: auto; здесь, но это не исправило.

Ответы [ 2 ]

0 голосов
/ 31 октября 2019

.main-footer.logged-in и .main-footer.logged-out имеют 30-пиксельный отступ сверху и снизу. Не могу точно сказать, связано ли это с вашей проблемой, чтобы определенно найти виновника, который мне нужен, чтобы увидеть ваш сайт.

0 голосов
/ 31 октября 2019

Добавьте минимальную высоту к вашему контейнеру: 

.container {
min-height: 1000px;
}

Или попробуйте поместить фоновое изображение внизу с помощью этого: 

.main-footer {
    background-position: bottom;
}

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

...