Загрузочный слой с надписью Footstrap

Я новичок в Bootstrap, и я пытаюсь использовать его с Symfony2. У меня уже есть главный лифтер, который используется для навигации. Моя проблема заключается в том, что я пытаюсь добавить аналогичный нижний колонтитул, который липкий снизу, но он перекрывает мой контент. Я использую JQuery script, чтобы избежать проблемы для верхней панели навигации, например:

$(document).ready(function(){
        $(document.body).css('padding-top', $('#topnavbar').height());
        $(window).resize(function(){
            $(document.body).css('padding-top', $('#topnavbar').height());
        });
    });

Структура моего основного шаблона Twig выглядит следующим образом:

    <div class="navbar navbar-default navbar-fixed-top" id="topnavbar">
      <div class="container-fluid">
      </div>
    </div>
    {% block body %}
    {% endblock %}
    <footer class="footer navbar-fixed-bottom">
    </footer>

Мой CSS оригинален. Я пытался с margin bottom или padding bottom, но перекрытие моего содержимого (в {% block body%}) всегда присутствует, и я не знаю, что делать, чтобы исправить его. У кого-нибудь есть идея?

Ответы

Ответ 1

Это более старая тема без выбора ответа.

Я нахожусь в новом шаблоне Bootstrap, портируя его текущую тему в раздел Bootstrap по разделам:)

У меня есть липкий заголовок и хочу, чтобы нижний колонтитул был заблокирован снизу в ВСЕ. У меня было это работает, но когда я изменил его размер, чтобы увидеть его отзывчивым, нижний колонтитул перекрыл содержимое. Мне понадобилось дополнение/пробел между "контентом" и "нижним колонтитулом", чтобы он не выглядел собранным вместе.

margin-bottom на теге тела не работает, он добавил пробел ниже нижнего колонтитула. Когда вы думаете о том, как марка ведет себя на теге body, это имеет смысл.

Правильный ответ - использовать "padding-bottom" на теге body. Я использовал размер размером 6 пикселей больше, чем высота моего нижнего колонтитула, чтобы обеспечить это небольшое отступы/интервалы.

body {
    padding-bottom: 120px;
}

.footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 114px;
}

Конечно, ваши высоты будут разными. Надеюсь, это поможет!

Ответ 2

Как стандарт, это ожидаемое поведение для верхних и нижних колонтитулов Bootstrap - они придерживаются верхней или нижней части и перекрывают основное содержимое. Решение для нижних колонтитулов должно добавить margin-bottom: [footer height]; к body, как в примере настройки на сайте Bootstrap:

липкий footer.css

body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

Вы упомянули margin-bottom в своем вопросе, так что если это не сработает, возможно, вы могли бы опубликовать то, что вы на самом деле пробовали?

P.S. Это, вероятно, не имеет ничего общего с Symfony!

Ответ 3

Существует новое современное решение на основе flex-box.

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1;
}

<body>
  <header>Hey</header>
  <main>Here some content</main>
  <footer>And a perfect sticky footer without overlapping</footer>
</body>

Ответ 4

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-footer {
  margin-top: auto;
}

Ответ 5

Сделать float: left он решил мою проблему .footer { float:left; }