• HTML
  • CSS

Как прижать footer сайта к низу страницы?

Сергей 315
Сергей 315
11K
1

Подскажите, как мне прикрепить footer сайта к низу экрана? Если контента у меня мало, то футер поднимается вверх. Это не хорошо выглядит. Верстка сайта выполнена на Bootstrap.

Ответы: 1

Аноним
Аноним
10.05.2018, 17:18

Если футер имеет строго фиксированную высоту, то можно так.

CSS: 
html {
  height: 100%;
}

body {
  min-height:100%; 
  position:relative; 
  padding-bottom: 70px; 
}

footer { 
  position: absolute; 
  left: 0;
  right: 0;
  bottom: 0; 
  height: 50px; 
}
HTML: 
<body>
  ...

  <footer>
    ...
  </footer>
</body>

Но лучше это сделать через flex.

CSS: 
html {
  height: 100%;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
}

header {
  flex: 0 0 auto;
}

main {
  flex: 1 0 auto;
}

footer {
  flex: 0 0 auto;
}
HTML: 
<body>

  <header></header>

  <main></main>

  <footer></footer>

</body>