Удерживать нижний колонтитул с переменной высотой внизу

Мне нужно держать нижний колонтитул снизу, но его высота может быть переменной, поэтому основные решения мне не подходят...

Примеры того, что я не могу сделать:

У кого-нибудь есть решение для гибких колонтитулов?

Ответ 1

2014 UPDATE. Современный способ решить эту проблему макета - использовать flexbox CSS-модель. Он поддерживается всеми основными браузерами и IE11 +.

Здесь решение для липкого нижнего колонтитула гибкой высоты с использованием div с display: table-row:

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  display: table;
  height: 100%;
  width: 100%;
  background: yellow;
}
.content {
  display: table-row;
  /* height is dynamic, and will expand... */
  height: 100%;
  /* ...as content is added (won't scroll) */
  background: turquoise;
}
.footer {
  display: table-row;
  background: lightgray;
}

<div class="wrapper">
  <div class="content">
    <h2>Content</h2>
  </div>
  <div class="footer">
    <h3>Sticky footer</h3>
    <p>Footer of variable height</p>
  </div>
</div>

Ответ 2

Думаю, я понимаю, что вы, что.

Вам нужно удалить высоту css и заменить ее верхним и нижним дном, если вы все еще находите расстояние.

Например,

#footer {
   position: absolute;
   bottom: 0;
   width: 100%;
   background: #6CF;
   padding-top: 20px;
   padding-bottom: 20px;
 }

Ответ 3

#wrapper, #content, #footer {
  width:100%;
  height:100%;
  position: relative;
}


<div id="wrapper">
  <div id="content"></div>
  <div id="footer"></div>
</div>