Статический нижний колонтитул расположен внизу страницы

Question

Я использую laravel 5.5 и мне нужен нижний колонтитул, чтобы быть внизу каждой страницы. В настоящее время у меня есть нижний колонтитул в app.blade.php вместе с панелью навигации и содержимым, полученным из других файлов.blade, с использованием yields @yield ('content')

файл app.blade имеет

html, body {   
 height: 100%;
}

и нижний колонтитул

footer {
  position: static;
  bottom: 0px;
}

При проверке страницы html и body имеют высоту 100%, но нижний колонтитул просто болтается с содержимым и не смещается вниз страницы.

Существуют ли стили, которые могут быть связаны с позиционированием?

Answer 1

Я не думаю, что стиль Laravel имеет какое-либо отношение к проблеме. Настройка position собственность на static не даст вам результаты, которые вы ищете, как static по умолчанию position значение почти для каждого элемента HTML. Вы можете установить его на absolute, fixed или же sticky и в зависимости от вашего выбора вам может понадобиться установить bottom собственность на нижнем колонтитуле 0px,

Эта статья CSS-хитрости должна дать вам лучшее представление о том, как вы хотите реализовать position а также bottom свойства на вашем нижнем колонтитуле.

Вот реализация с использованием fixed значение в нижнем колонтитуле и relative значение элемента тела.

Вы также можете просмотреть этот проект codeply и поэкспериментировать с изменением нижнего колонтитула. position значение.

html, body {   
 height: 100%;
 background-color: red;
 position: relative;
}

footer {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 10%;
  width: 100%;
  background-color: green;
}