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

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

4 голосов
/ 22 января 2011

Если на странице не так много контента, например, 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 ]

2 голосов
/ 24 января 2011

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

0 голосов
/ 28 декабря 2013

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

Это сделает нижний колонтитул размером 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>
...