-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 перестает выравниваться по низу.

nup
  • 1,833

2 Answers2

2

Если делаете через 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>
hisbvdis
  • 1,372
0

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>

Так?

Владислав
  • 1,118