Прижать footer к низу

Question

Подсобите пожалуйста с версткой начального макета на Bootstrap 4. Я не очень хороший верстальщик( Вот что я сделал:

body {
  background-color: yellow !important;
}

header {
  background-color: red;
}

main {
  background-color: green;
}

footer {
  background-color: blue;
  position: absolute;
  bottom: 0;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<header class="container">
  HEADER
</header>
<main class="container">
  CONTENT
</main>
<footer class="container">
  FOOTER
</footer>

Вот видите что произошло? Футер ушел влево. :( Оно и понятно - position: absolute, но как по другому его прижать я не знаю. Можно задать сейчас width: 100%, но тогда он будет на всю ширину, а я хочу чтобы он был как и остальные блоки с отступами от краев. И еще мне не нравится то что блок main прилип к хедеру. Я хочу чтобы он разъезжался до футера даже без контента.

P.S. Может правильнее поставить класс container тегу body, а не всем по отдельности?

Answer 1

Изначально рекомендую ознакомиться с основами верстки и документацией по bootstrap.

Что не так в Вашем примере?!

То что Вы просто задаете footer просто состояние position: absolute, а нужно дополнительно положение top, left. C расчетом, что подвал будет позиционироваться относительно body (либо ближайшего родителя с position: relative).

Если дополнительно задать еще и right: 0, то footer растянется на всю ширину контента (с учетом max-width и margin: 0 auto; у container).

@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css');

body {
  background-color: yellow !important;
}

header {
  background-color: red;
}

main {
  background-color: green;
}

footer {
  background-color: blue;
  position: absolute;
  bottom: 0;
  left: 0;
  
  right: 0;
}

<header class="container">
  HEADER
</header>
<main class="container">
  CONTENT
</main>
<footer class="container">
  FOOTER
</footer>

Но в bootstrap 4 уже все продумали для подобных случаев.

Находим страницу о позиционировании в Bootstrap 4

И видим пример разметки для абсолютного позиционирования внизу страницы

<div class="fixed-bottom">...</div>

Итого:

@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css');
body {
  background-color: yellow;
}

header {
  background-color: red;
}

main {
  background-color: green;
}

footer {
  background-color: blue;
}

<header class="header">
  <div class="container">
    HEADER
  </div>
</header>
<main class="main">
  <div class="container">
    CONTENT
  </div>
</main>
<footer class="footer fixed-bottom">
  <div class="container">
    FOOTER
  </div>
</footer>

Либо так:

@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css');
body {
  background-color: yellow;
}

header {
  background-color: red;
}

main {
  background-color: green;
}

footer {
  background-color: blue;
  bottom: 0;
  left: 0;
  right: 0;
}

<header class="header">
  <div class="container">
    HEADER
  </div>
</header>
<main class="main">
  <div class="container">
    CONTENT
  </div>
</main>
<footer class="footer position-absolute">
  <div class="container">
    FOOTER
  </div>
</footer>

С отступами, т.е. внутри container и контентом на всю высоту:

html,
body {
  height: 100%;
}

@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css');
html,
body {
  height: 100%;
}

<body class="bg-warning">
  <header class="header fixed-top">
    <div class="container">
      <div class="bg-danger">
        HEADER
      </div>
    </div>
  </header>
  <main class="main h-100">
    <div class="container h-100">
      <div class="bg-success h-100">
        CONTENT
      </div>
    </div>
  </main>
  <footer class="footer fixed-bottom">
    <div class="container">
      <div class="bg-primary">
        FOOTER
      </div>
    </div>
  </footer>
</body>

Answer 2

Добавляйте и радуйтесь

<nav class="navbar fixed-bottom navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">fixed-bottom</a>
  </div>
</nav>

Документация

Answer 3

<footer class="mt-auto position-sticky top-100">
   FOOTER
</footer>

БЛОГ НА HUSL

Прижать footer к низу

Ответы (3 шт):