Сбросить нижний колонтитул до конца страницы в начальной загрузке 4 - PullRequest
Новая
       25

Сбросить нижний колонтитул до конца страницы в начальной загрузке 4

0 голосов
/ 04 июня 2018

Я использую начальную загрузку 4

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

<div id="app">
  <div id="content">
    <nav id="content-header">
    ...code here...
    </nav>
    <main id="content-main">
    ...code here...
    </main>
    <div id="footer">
    ...code here...
    </div>
  </div>
</div>

Однако нижний колонтитул не смещается вниз, как ожидалось.(Я не ищу липкий нижний колонтитул).Как отправить нижний колонтитул с кодом, который я использую.

Несколько недель назад я прочитал статьи о том, что нам нужно использовать id = "content" и content-header содержимого-нижнего колонтитула соответственно для начальной загрузки, чтобы сделать эту работу.Я потерял ссылку на статью, поэтому разместил вопрос здесь.

Любая помощь приветствуется

1 Ответ

0 голосов
/ 04 июня 2018
Bootstrap не имеет ни селектора id, ни .content-header или .content-footer.

Есть несколько способов, которыми вы можете достичь этого.Я хочу показать вам 3 из них.

Flex - flex-grow-1

  1. Используйте класс h-100 для всех родителей #content divвключая html и body.

  2. Использование классов d-flex, flex-column и h-100 для #content div.

  3. Используйте flex-grow-1 для содержимого main.

Вы должны использовать версию Boostrap 4.1 или выше, поскольку в более низкой версии нет flex-grow-1.

Смотрите эту ручку.Я рекомендую вам добавлять и удалять тексты, чтобы вы видели, что это работает.

https://codepen.io/anon/pen/bKEjLR

Flex - mt-auto

  1. Используйте класс h-100 для всех родителей #contentdiv, включая html и body.

  2. Использование классов d-flex, flex-column и h-100 для #content div.

  3. Используйте mt-auto для footer.

html,
body {
  height: 100%
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div id="app" class="h-100">
  <div id="content" class="d-flex flex-column h-100">
    <nav id="content-header" class="bg-info p-5">
    ...code here...
    </nav>
    <main id="content-main" class="bg-primary p-5">
    ...code here...
      
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat hic aspernatur quibusdam alias delectus odit officiis in, est sapiente deserunt harum aliquam at mollitia deleniti labore corrupti illum recusandae dolorum.
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste inventore voluptatum sint mollitia unde quisquam numquam vitae? Id, quia. Cupiditate nam vero natus, facere nesciunt vel delectus assumenda eos sequi!
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non asperiores perferendis quae harum ab, dolorem dicta repudiandae quisquam repellendus eveniet, totam voluptatum, eum cum nobis? Atque alias dolores nam illum.
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi odit aspernatur minima tempora! Similique consequatur distinctio odit nemo, pariatur consectetur ad ipsum provident corporis nostrum culpa cumque doloremque quo quia.
    </main>
    <div id="footer" class="bg-danger p-5 mt-auto">
    ...code here...
    </div>
  </div>
</div>

min-height: calc (100vh - (высота заголовка + нижний колонтитул));

Мы использовали этот, потому что некоторые очень старыебраузеры не поддерживают flex box.Проверьте поддержку браузера для flex .

  1. Найдите сумму высоты нижнего колонтитула и верхнего колонтитула, предположим, что это 120px
  2. Set min-height из main рассчитать (100vh - 120px);

main {
  min-height: calc(100vh - 120px);
}

См. Эту ручку.https://codepen.io/anon/pen/bKExLm

Посетите эти страницы, чтобы узнать другие методы

https://css -tricks.com / couple-take-sticky-footer /

https://codepen.io/cbracco/pen/zekgx

...