Заставить нижний колонтитул придерживаться нижней части страницы и получить толчок от содержания - PullRequest
Новая
       40

Заставить нижний колонтитул придерживаться нижней части страницы и получить толчок от содержания

0 голосов
/ 29 января 2020

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

Популярные вопросы, которые говорят об этом:

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

Есть ли любой способ зафиксировать нижний колонтитул в нижней части страницы, который работает на любом экране и не использует предопределенные константы?

В приложении, над которым я работаю, я использовал @media разделить, как это выглядит на мобильных и настольных компьютерах, но обнаружил, что 100vh не является всегда портом полного обзора на мобильном телефоне (обсуждение здесь ). После некоторой путаницы я заставил это работать (что касается моей консоли разработчика Google Chrome).

(верхний и нижний колонтитулы являются компонентами реакции) 

<Header/>
<div className="content">
  <p>Content</p>
<div>
<Footer/>

.content {
    @media screen and (max-width: 738px) {
        min-height: calc(100vh - #{$footer-height-mobile} - 1.92 * #{$navbar-height});
    }
    @media screen and (min-width: 738px) {
        min-height: calc(100vh - #{$footer-height-desktop} - #{$navbar-height});
    }

}

1.92 было единственным значением, которое дало мне ожидаемое поведение. Меньше и переполняется, больше не остается и оставляет пустое пространство внизу. Это реальное решение или это просто то, что сработало в Google Chrome?

1 Ответ

1 голос
/ 31 января 2020

Вы можете заставить нижний колонтитул вести себя так, как вы упомянули, используя flexbox. Здесь вы можете найти статью css, рассказывающую об этом.

У меня уже была эта проблема, и flexbox - действительно хорошее решение. Однако в IE11 есть ошибка, из-за которой расстояние между контентом и нижним колонтитулом вычисляется неправильно при использовании увеличенного изображения. Но я думаю, что это пренебрежимо.

...