Футер и центральный блок

Question

Как прижать футер к низу страницы, в тоже время, чтобы центральный блок растягивался до футера независимо от контента?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="wrapper">
        <div class="headerr">
            <div class="container">
                <div class="header"></div>
            </div>
        </div>
        <div class="mainn">
            <div class="container">
                <div class="main">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium id eius maxime at repellat beatae velit suscipit tempore, molestiae atque culpa ducimus perspiciatis pariatur hic doloribus perferendis, delectus illum cum fugit. Voluptatem ratione dignissimos error consequuntur, explicabo et quisquam ipsum, pariatur fugiat porro maiores, possimus laudantium eveniet cupiditate cum iure sit laboriosam sunt repellendus! Dignissimos architecto dolore eius odit, rerum minus deserunt, in. Quasi placeat molestias in ipsum itaque, ex laborum illo a aspernatur pariatur dignissimos alias aliquam, consequuntur corporis.</div>
            </div>
        </div>
    </div>
        <div class="footerr">
            <div class="container">
                <div class="footer"></div>
            </div>
        </div>
</body>
</html>

Хоть футер и прижимается, но центральный блок не растягивается + при растягивании помощника разработчика (f12) футер бегает вместе с ним

* {
    padding: 0px;
    margin: 0px;
}

html,
body{
    height: 100%;
}

.wrapper {
    min-height: 100%;
    height: auto;
    margin: -80px auto 0;
}

.headerr {
    height: 80px;
    background: red;
    padding-top: 80px;
}

.container {
    width: 940px;
    margin: 0 auto;
}

.header {
    height: 80px;
    background: #000;
}

.mainn {
   min-height: 100%;
    background: yellow;
}

.main {
    background: blue;
}

.footerr {
    background: green;
}

.footer {
    height: 80px;
    background: #ccc;
}

Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). — Nicolas Chabanovsky, Dec 17 '15 at 11:53
Обновил ответ, который будет работать во всех браузерах включая IE 10/11. — Vadim Ovchinnikov, May 27 '18 at 19:59

score 1 · Answer 1 · edited Jan 02 '17 at 12:47

Это простое позиционирование

body {
  margin: 0;
  position: relative;
}
.wrapper {
  height: 100%;
  width: 100%;
  background-color: yellow;
}
.footer {
  position: absolute;
  width: 100%;
  bottom: 0;
  background-color: green;
}

<body>
  <div class="wrapper">
    ваш сайт
  </div>
  <div class="footer">
    ваш футер
  </div>
</body>

В браузере все будет хорошо выглядеть. В случае если содержимое wrapper больше окна, footer будет сдвигаться, если меньше - прижиматься к низу экрана. Если нужно, чтобы footer всегда был на экране, замените ему position: absolute; на position: fixed;

score 0 · Accepted Answer · answered Dec 16 '15 at 10:43

0

в вашем случае пропишите height: 100%; блокам .wrapper, .container, .mainn, .main

answered Dec 16 '15 at 10:43

lexxl

5,542

Спасибо за ответ, но с такими параметрами центральный блок "убегает" за футер – NIkita M. Dec 16 '15 at 17:49
в таком случае надо высоту высчитывать так width: calc(100% - XXpx) - XXpx это высота вашего футера в пикселях или других единицах. – lexxl Dec 16 '15 at 20:11

score 0 · Answer 3 · answered Dec 16 '15 at 11:01

Еще можно попробовать так:

* {
  padding: 0px;
  margin: 0px;
}
html,
body {
  height: 100%;
}
.wrapper {
  text-align: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
}
.container {
  max-width: 940px;
  background: yellow;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin: auto;
  width: 100%;
}
.header {
  height: 80px;
  background: #000;
  color: #fff;
}
.footer {
  height: 80px;
  background: #ccc;
}

<div class="wrapper">
<div class="header">
<h3>Header</h3>
</div>
<div class="container">
<p>Text
  </div>
<div class="footer">
<h3>footer</h3>
  </div>
</div>

Спасибо, но с флексбоксами я пока не знаком, есть ли вариант обойти без флексов? — NIkita M., Dec 16 '15 at 17:45

score 0 · Answer 4 · answered Dec 16 '15 at 18:37

Есть еще вариант, использованный здесь.

* {
  box-sizing: border-box;
}
html {
  background: #8495a5;
  color: #333;
  font: 300 100%/1.5 'Open Sans', sans-serif;
}
h1 {
  margin: 0;
  color: #fff;
  font: 700 2em/2 'Josefin Slab', serif;
  text-align: center;
  text-shadow: 0.05em 0.05em 0.1em rgba(0, 0, 0, 0.4);
}
.header {
  height: 5em;
  padding: 0.5em;
}
.main {
  min-height: calc(100vh - 10em);
  background: rgba(255, 255, 255, 0.5);
}
.footer {
  height: 5em;
  padding: 0.5em;
}
.footer p {
  margin: 0.25em 0;
  color: #fff;
  font-size: 2em;
  font-weight: 400;
  text-align: center;
}

<header class="header">
  <h1>Sticky footer using calc and vh units</h1>
</header>
<main class="main">

</main>
<footer class="footer">
  <p>Hello look at me, I’m the sticky footer!</p>
</footer>

Vadim Ovchinnikov · Answer 5 · 2018-05-27T20:05:19.807

Решение на Flexbox. Более универсальное в плане сопровождаемости, так как не требует задания фиксированной высоты и хаков с position: absolute:

body {
  height: 100vh;
  margin: 0;
display: flex;
  flex-direction: column;
}
header,
footer {
  flex-shrink: 0;
}
.content {
  border: 1px dotted red;
}
footer {
  /* Опустить в самый низ */
  margin-top: auto;
}

<header>
  header
</header>
<div class="content">
  content
</div>
<footer>
  footer
</footer>

Больше подробностей здесь.

score -1 · Answer 6 · answered Dec 16 '15 at 19:12

-1

Попробуйте

.footerr {
    position: fixed;
    bottom: 0;
    float: bottom;
}
.mainn {
    height: 100%;
}

answered Dec 16 '15 at 19:12

CodeGust

1,834

Футер и центральный блок

6 Answers6