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

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

0 голосов
/ 03 июля 2018

Этот вопрос может повториться! Я бы хотел, чтобы мой нижний колонтитул находился внизу страницы, но не был там зафиксирован при прокрутке. Мне бы хотелось, чтобы это было как нижний колонтитул внизу этой страницы Пример нижнего колонтитула . Пока это мой код нижнего колонтитула, я использую загрузчик 4, но я не могу найти класс, чтобы помочь мне с тем, что я хочу. 

<footer>
  <a href="#"><i class="fa fa-facebook"></i></a>
  <a href="#"><i class="fa fa-twitter"></i></a>
  <a href="#"><i class="fa fa-google-plus"></i></a>
  <a href="#"><i class="fa fa-twitch"></i></a>
</footer>

Мне хорошо известен класс начальной загрузки

.fixed-bottom но, как я уже сказал, я не хочу, чтобы нижний колонтитул оставался при прокрутке.

Ответы [ 2 ]

0 голосов
/ 07 июля 2018

Я думаю, что вы можете извлечь выгоду из Flexbox, если я не понимаю, что вы собираетесь. В любом случае я считаю, что Flexbox - это ответ, просто дайте мне знать, если это работает для вас , или мы можем исследовать немного глубже.

Вот кодовая ручка: https://codepen.io/codespent/pen/eKqzjX

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

.main {
  flex: 1 0 auto;
  border: 1px solid #000;
}

.wrapper {
  display: flex;
  justify-content: center;
}

footer {
  flex: 0 0 auto;
  display: flex;
  color: #ccc;
  margin: 1em;
  padding: 1em;
  width: 80%;
  border-top: 1px solid blue;
  justify-content: center;
}

footer i {
  padding: 1em;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

<body>
  <div class="main">
    <h1>Hello Flex</h1>
    <p>This is Flexbox</p>

    <h1>Hello Flex</h1>
    <p>This is Flexbox</p>
  </div>
</body>
<div class="wrapper">
  <footer>
    <a href="#"><i class="fa fa-facebook"></i></a>
    <a href="#"><i class="fa fa-twitter"></i></a>
    <a href="#"><i class="fa fa-google-plus"></i></a>
    <a href="#"><i class="fa fa-twitch"></i></a>
  </footer>
</div>

Так что здесь важно?

  • Мы делаем тело нашего документа контейнером Flexbox , чтобы наши внутренние элементы были гибкими элементами.
  • Мы устанавливаем наш flex-direction в column, чтобы он двигался вертикально, как наш традиционный поток документов.
  • Мы даем нашему главному контейнеру значение flex-grow, равное 1, чтобы заполнить все незанятое пространство.
  • Мы даем нашему footer гибкую основу auto, а также делаем его гибким контейнером, чтобы наши ссылки легко выравнивались по горизонтали с пространством для работы.
0 голосов
/ 03 июля 2018

Вы можете использовать чистый CSS, например: 

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: #333;
  color:#fff;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...