CSS - сделать FLUID высоту нижнего колонтитула придерживаться нижней части страницы

Если на странице мало контента, например, около 300 пикселей, нижний колонтитул появится в середине страницы с разрешением 1024.

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

Я пробовал это решение:

/* css */
html, body {
    height: 100%;
}

#container {
    min-height: 100%;
    position: relative;
}

#footer {
    position: absolute;
    bottom: 0;
}


<!-- html -->
<html>
<head></head>

<body>
  <div id="container">
    <div id="footer"></div>
  </div>
</body>
</html>

но проблема в том, что мне нужно было бы добавить padding-bottom: (footerheight); в элементе перед #footer. Это невозможно, потому что высота нижнего колонтитула зависит от страницы...

Источник

2 ответа

Решение

Почему бы вам просто не использовать минимальную высоту в области содержимого, поэтому, если вы установите минимальную высоту в 600 пикселей, если контента всего 300 пикселей, нижний колонтитул будет добавлен еще на 300 пикселей, чтобы он не находился в середине экрана.

Источник

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

Это сделает нижний колонтитул размером 75 пикселей. Обратите внимание на соответствующее поле -75px контейнера div.

html {
  height:100%;
  padding:0px;
  margin:0px;
}
body {
    height:95%;
    padding:0px;
    margin:0px;
    background-color:#1C303C;
}

footer {
    background-color:#1C303C;
    color:#FFFFA3;
    display:block;
    position:absolute;
    width:100%;
    min-height:75px;
    height:75px;
    margin:0px;
    padding:0px;
    left:0px;

}

#container {
    background-color:#FFFFFF;
    min-height:100%;
    height:100%;
    width:100%;
    top:0;
    left:0;
    margin: 0;
    padding:0;
    margin-bottom:-75px;
}

с соответствующим HTML следующим образом:

<body>
    <div id="container">
    </div>
    <footer>
    </footer>
</body>
Источник
Другие вопросы по тегам