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

Question

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

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

Я провел свое исследование и посмотрел другие ответы на другие вопросы, но у них либо так много классов, что они используют положение: исправлено,или они используют JS.

Вот код для файла layout.pug:

.footer-wrapper
    footer © 2018 Demo Website

А код, который я пробовал в SCSS, находится здесь:

.footer-wrapper {
    // min-height:100%;
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
}

footer {
    background-color: #0A0A0A;
    color: white;
    // height: 60px;
    bottom: 0;
    text-align: center;
    position: absolute;
    width: 100%;
    padding: 1.5rem;
    // display: grid;
    // margin-top: auto;
    // padding:10px;
}

Большое спасибо!

Answer 1

Нечто подобное должно работать.Пусть свойство flex-grow обрабатывает высоту контейнера .content.

<div class="main">
    <div class="header">header</div>
    <div class="content">content</div>
    <div class="footer">footer</div>
</div>

<style>
    .main {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      height: 100vh;
    }

    .content{ flex-grow: 1; }
</style>

Answer 2

Есть действительно дешевый способ сделать это, что на самом деле неплохо.

Если вы используете заголовок, вы можете сделать что-то вроде этого:

<header>
<div id = "body">
<footer>
...
<style scoped = "scss">
#body {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column; 
    margin-top: <header_height>;
    margin-bottom: <footer_height>;
}
</style>

По сути, он устанавливает содержание тела для заполнения всей страницы, но оставляет место для верхнего колонтитула в верхней части страницы и пространство для нижнего колонтитула в нижней части страницы (если нет сгибания).Если на странице недостаточно места для размещения содержимого тела, элемент body будет сгибаться в столбце, автоматически перемещая нижний колонтитул вместе с ним.

Надеюсь, это поможет!