Как выровнять footer по низу экрана? [дубликат]

110

05 мая 2021, 13:40

На этот вопрос уже даны ответы здесь:

Как всегда прижимать footer к низу экрана? (9 ответов)

Закрыт 1 год назад.

Сайт состоит из 3 частей: header, div#content и footer. При этом, header имеет фиксированную высоту, а footer - нет. В блоке div#content располагается контент сайта. В некоторых случаях суммарная высота блока body может быть меньше высоты видимой области (мало контента на странице). Растягиваю body по высоте таким стилем:

html, body {
    min-height: 100vh;
}

Необходимо сделать так, чтобы блок footer всегда был прижат к нижней части экрана. Сразу отпадает position: absolute. Также, пробовал через display: flex для body: при установленном стиле align-self: flex-end для footer все нормально: элемент прижимается к нижней части экрана, но между header и div#content появляется зазор. Если поставить элементу body стиль flex-direction: column, то зазор пропадает, но элемент footer перестает выравниваться по низу.

Answer 1

Если делаете через Flexbox, центральный блок растягивайте не через align-self, а через flex-grow: 1

body {  
    margin: 0; 
    padding: 0; 
} 
.page { 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
} 
header { 
    background: #9cfae0; 
} 
main { 
    background: #5ca6ac; 
    flex-grow: 1; 
} 
footer { 
    background: #a9d827; 
}

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

Answer 2

body { 
  padding: 0; 
  margin: 0; 
  min-height: 100vh; 
  height: 100%; 
  display: flex; 
  flex-direction: column; 
} 
 
header { 
  height: 100px; 
  background: red; 
} 
 
#content { 
  background: yellow; 
} 
 
footer { 
  flex: 1 0 100px; 
  background: pink; 
}

<header> 
</header> 
<div id='content'> 
 
  <br/> 1 
  <br/> 1 
  <br/>1<br/> 1 
  <br/> 1 
  <br/> 1 
  <br/> 1 <br/> 1 
  <br/>1<br/> 1 
  <br/> 1 
  <br/> 1 
  <br/> 1 1 
  <br/> 
  <br/> 
</div> 
<footer> 
</footer>