Липкий нижний колонтитул с flexbox - PullRequest
Новая
       6

Липкий нижний колонтитул с flexbox

0 голосов
/ 20 мая 2018

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

Но поскольку я не вижу, чтобы другие люди использовали то же самое, Мне интересно, не нарушен ли этот способ вне браузеров, которые вообще не поддерживают flex-box?

Я использую bootstrap для настройки flex-box, и я работаюв React вот мой код: 

<div className="body-div d-flex flex-column justify-content-between">
  <div>  <!-- inner div -->
    <MainNav/>
  </div>
  <MainFooter className="d-flex flex-column"/>
</div>

Для людей, которые не знают, что реагируют: внешний div может рассматриваться как элемент body на «нормальной» html-странице.

css для body-div: 

min-height: 100vh;

Таким образом, я в основном позволяю внутреннему div и основному нижнему колонтитулу перемещаться вверх и вниз соответственно, устанавливая их контейнер в flex-box со свойством justify-contentустановить пробел между.

Также я хотел бы добавить, что содержимое моего сайта, за исключением нижнего колонтитула, будет находиться внутри внутреннего элемента div.

1 Ответ

0 голосов
/ 20 мая 2018

Да, это нормальная настройка.Вот что должен делать justify-content: space-between: прикрепить первый и последний элементы к краям контейнера. 

main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
}

article { background-color: lightgreen; }
footer  { background-color: orangered;  }
body    { margin: 0; }
<main>
  <article>inner div</article>
  <footer>footer</footer>
</main>

Кроме того, если вы хотите, чтобы основное содержимое заполняло пустое пространство, прижимая нижний колонтитул к основанию, вам даже не нужно justify-content.Используйте flex-grow. 

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

article {
  flex-grow: 1;
  background-color: lightgreen;
}

footer  { background-color: orangered;  }
body    { margin: 0; }
<main>
  <article>inner div</article>
  <footer>footer</footer>
</main>

Наконец, если в гибком контейнере имеется несколько элементов, justify-content может не предоставлять достаточно параметров для выравнивания.У вас гораздо больше гибкости с автоматическими полями .

...