Проблема с липким нижним колонтитулом Flexbox?

StackOverflow https://stackoverflow.com//questions/23026696

Вопрос

Я экспериментировал с Flexbox, пытаясь создать липкий нижний колонтитул, но по какой-то причине один из моих элементов div перекрывает нижний колонтитул?Когда я перетаскиваю окно на монитор большего размера, нижний колонтитул становится идеальным.Что я делаю не так?

Кроме того, я бы предпочел использовать этот метод вместо других методов, таких как table метод.

Вот мой HTML-макет:

<body>
    <div class="mainContent">...</div>
    <div class="footer">...</div>
</body>

Внутри моего mainContent div у меня есть полная верхняя часть моего сайта, включая заголовок.Мне просто нужно использовать это как весь контент, а затем получить нижний колонтитул.

Вот CSS, который у меня есть:

body
{
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 100vh;
}

.mainContent
{
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-flex: 1;
}

.footer
{
    height: 75px; 
    background: #222;
    color:#EEE;
}

Я даже пробовал это: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

Но у меня та же проблема, с которой я сейчас сталкиваюсь.

ОБНОВЛЯТЬ

В соответствии с просьбой в комментариях я установил для своего основного содержимого div значение overflow: auto; но мой контент был закрыт нижним колонтитулом.Как мне это исправить?

Это было полезно?

Решение

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

Вот что я сделал несколько месяцев назад...Многие правила CSS являются устаревшими, поэтому будьте осторожны, но я считаю, что это близко к тому, что вы хотите сделать:http://plnkr.co/edit/o2BAwvg3XV4YjwAwwmYR?p=preview

Но на самом деле я рекомендую вам использовать это для создания правил гибкого CSS:http://the-echoplex.net/flexyboxes/

Другие советы

Раньше я потратил много времени на поиск быстрых и надежных решений с использованием CSS3 Flexbox или Grid для решения этой проблемы.Надеюсь, это поможет. 

<body>
  <header></header>
  <main></main>
  <footer></footer>
</body>

Это должно работать как для IE, так и для Chrome:

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

main {
  flex: 1 0 auto;
}

footer, header {
    flex-shrink: 0;
}

Вы также можете попробовать Grid Layout,

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr 1fr auto;
}

footer {
  grid-row: 3/4;
}

Обратитесь к моему сайту: http://matthiassommer.it/web/javascript/sticky-footer-css3-flexbox-grid/

Я знаю, что ответ уже принят, но у меня есть очень простой пример, в котором используется только тот код, который вам нужен (и немного JavaScript для демонстрации).

https://codepen.io/alexmccabe/pen/RgMBjJ

Вот что происходит:

Сначала вы устанавливаете body и html до 100% высоты браузера.

html,
body { height: 100%; }

Затем вы устанавливаете элемент-оболочку, чтобы иметь min-height 100 % и отображать гибкость.Столбец гарантирует, что элементы не будут размещены рядом друг с другом.

.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

И теперь нижний колонтитул становится margin-top из auto.Он находится в нижней части окна браузера.

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

Примечание:Убедитесь, что вы включили все старые стили браузера, и следите за Safari 8.Иногда это может быть непросто.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top