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

Ответ 1

То, что я хотел, заключалось в том, чтобы нижний колонтитул был внизу представления браузера ТОЛЬКО, если контент был недостаточно длинным, чтобы заполнить окно браузера (нелипкое).

Я смог добиться с помощью функции CSS calc(). В настоящее время в основном поддерживается. Вы можете использовать как:

<div class="container">CONTENT</div>
<div class="footer">
</div>

css:

.container
{
    min-height: 70%;
    min-height: -webkit-calc(100% - 186px);
    min-height: -moz-calc(100% - 186px);
    min-height: calc(100% - 186px);
}

Измените 186 на размер нижнего колонтитула.

Ответ 2

Пример: http://jsfiddle.net/AU6yD/

html, body { height: 100%; }

#wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -30px; }
#bottom, #push { height:30px;}

body { background:#333;}
#header { height:30px; background:#000; color:#fff; }
#footer { height:30px; background:#000; color:#fff; }

<div id="wrapper">
    <div id="header">
        Header
    </div>
    <div id="push"></div>
</div>
<div id="bottom">
    <div id="footer">
        Footer
    </div>
</div>

Ответ 3

Попробуйте использовать

position:absolute;
bottom:0;

он решил мою проблему.

Ответ 4

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

html,
body {
  height: 100%;
}

.container {
  min-height: 80%;
  background-color: #f3f3f3;
}

.footer {
  background-color: #cccccc;
  box-shadow: 0px 500px 0px 500px #cccccc;
}

<div class="container">Main content</div>
<div class="footer">Footer</div>

Ответ 5

Я попробовал: http://jsfiddle.net/AU6yD/, так как здесь это лучший вариант, но у меня были проблемы, когда содержимое <div id="wrapper"> начало получать слишком большой evidence.png, то, что я сделал, чтобы решить это, обновляло размер тела каждый раз, когда я менял содержимое этого div следующим образом:

var body = document.body,
html = document.documentElement;
body.style.height = 100 + "%";
setTimeout(function(){
   var height = Math.max( body.scrollHeight, body.offsetHeight,
                          html.clientHeight, html.scrollHeight, 
                          html.offsetHeight );
   body.style.height = height + "px";
}, 500);

Ответ 6

Попробуйте codepen.io/dendii/pen/LLPKJm реагировать на сообщения

html, body {
  color:#fff;
}
.wrapper{
    box-sizing: border-box;
    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;
    margin: 0 auto;
    min-height: 100vh;
}
.main{
  width:100%;
  overflow:hidden;
}
.main-inner {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
article,aside{
  float:left;
  padding:20px 10px;
}
article{
  width:70%;
  background:darkred;
}
aside{
  width:30%;
  background:darkblue;
}
.top {
  padding:20px 10px;
  height:100%;
  background:darkgreen;
}
.bottom,.text-mid {
  padding:20px 10px;
  height:100%;
  background:darkorange;
}
.text-mid {
  margin-top: auto;
  background:darkgrey;
}
@media (max-width: 768px){
  .main-inner{
    display: block;
  }
  article,aside{
    width:100%;
    float:none;
    display: block;
  }
}

<div class="wrapper">
    <header class="top">
      <h1>Header</h1>
    </header>
<div class="main"><div class="main-inner">
  <article>
    blank content
  </article>
  <aside>
    class sidebar
  </aside>
</div></div>
<div class="text-mid">
    <div class="center">
        Whatever you want to keep.
    </div>
</div>
<footer class="bottom">
    <div class="footer">
        Footer
    </div>
</footer>
 </div>

Ответ 7

Это то, что я делаю для своей страницы

<h6 style="position:absolute; bottom:0;">This is footer at bottom of page without scrollbars</h6>

Ответ 8

Я пробовал это, и он отлично работает до сих пор

position:absolute;
bottom:0;
width:100%;

или

position:absolute;
bottom:0;
left:0;
right:0;

Ответ 9

Я решил такую ​​же проблему с jquery

    var windowHeiht = $(window).height();
    var footerPosition = $("#asd-footer").position()['top'];

    if (windowHeiht > footerPosition) {
        $("#asd-footer").css("position", "absolute");
        $("#asd-footer").css("bottom", "0");
        $("#asd-footer").css("width", "100%");
    }