0

Подсобите пожалуйста с версткой начального макета на 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, а не всем по отдельности?

9

3 ответа 3

5

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

  1. webref.ru
  2. webref.ru/layout/bootstrap4
  3. getbootstrap.com/docs/4.4

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

То что Вы просто задаете 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>

5
  • Это конечно все хорошо, но вы потеряли отступы по бокам :( К тому же контент не растянулся до футера как я хотел
    – Developer
    22 мар 2020 в 7:42
  • А теперь хедер перекрыл контент =(
    – Developer
    22 мар 2020 в 17:38
  • @Hamster Красивый, развёрнутый и самое главное познавательный ответ )
    – Denis640Kb
    7 апр 2020 в 6:52
  • @Denis640Kb, недостаточно, раз автору не помогло
    – SVE
    7 апр 2020 в 8:45
  • @HamSter Мне кажется помогло ))) Просто промолчал. (У него много таких ответов) Вы абсолютно чётко и корректно не только показали как это сделать, но и объяснили, что именно и в каком формате делать. Несколько раз прочитал вопрос, посмотрел ответ. Ничего не перекрывается, если только пользователь сам не добавил дополнительно чего-либо.
    – Denis640Kb
    7 апр 2020 в 9:04
0

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

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

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.