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

Question

У меня есть страница с внешним div, который оборачивает div заголовка, содержимого и нижнего колонтитула.Я хочу, чтобы div нижнего колонтитула занимал нижнюю часть браузера, даже если div содержимого недостаточно высок, чтобы заполнить видимую область (т. Е. Прокрутка отсутствует).

Answer 1

Ваша проблема может быть легко решена с помощью flexbox. Просто оберните ваш .container и ваш .footer в гибкий контейнер с минимальной высотой: 100vh, переключите направление на столбец так, чтобы они складывались друг на друга, и выравнивайте содержимое с пробелом, чтобы нижний колонтитул переместился дно.

.flex-wrapper {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: space-between
}

<div class="flex-wrapper">
  <div class="container">The content</div>
  <div class="footer">The Footer</div>
</div>

Answer 2

Я хотел, чтобы нижний колонтитул находился ТОЛЬКО в нижней части окна браузера, ТОЛЬКО ЕСЛИ содержимое было недостаточно длинным, чтобы заполнить окно браузера (не липкое).используя функцию CSS calc ().Который поддерживается всеми современными браузерами.Вы можете использовать как:

<div class="container">CONTENT</div>
<div class="footer">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 на размер вашего нижнего колонтитула.

Answer 3

Пример: 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>

Answer 4

Я сделал то же самое, что сделал Jahmic (пока не позволю мне комментировать), за исключением того, что мне пришлось использовать VH вместо%, поскольку я не мог просто применить его к классу контейнера.

#inner-body-wrapper
{
    min-height: 70vh;
    min-height: -webkit-calc(100vh - 186px);
    min-height: -moz-calc(100vh - 186px);
    min-height: calc(100vh - 186px);
}

Answer 5

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

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>

Answer 6

Переработка решения jQuery.У меня это работает с изменением размера окна.Когда окно больше страницы, позиция нижнего колонтитула «абсолютная» фиксируется в нижней части окна.Когда окно меньше, чем страница, нижний колонтитул остается внизу страницы - прокручивая внизу.

<style>
    .FooterBottom {
        width:100%;
        bottom: 0;
        position: absolute;
    }
</style>
<script type="text/javascript">
    $(document).ready(function () {
        FooterPosition();

        $(window).resize(function () {
            FooterPosition();
        });
    });

    var originalFooterBottom = 0;

    function FooterPosition() {
        var windowHeight = $(window).height();
        if (originalFooterBottom == 0) {
            var footer = $("#Footer");
            originalFooterBottom = footer.position()['top'] + footer.height();
        }

        if (windowHeight > originalFooterBottom) {
            var footerElement = document.getElementById("Footer");
            if (!footerElement.classList.contains('FooterBottom')) {
                footerElement.classList.add('FooterBottom');
            }
        }
        else {
            var footerElement = document.getElementById("Footer");
            if (footerElement.classList.contains('FooterBottom')) {
                footerElement.classList.remove('FooterBottom');
            }
        }

    }
</script>

Я испробовал много решений только для стиля, но ни одно из них не сработало.Это решение Javascript / Style прекрасно работает для меня, даже с его странным сочетанием jQuery и GetElement.

Спасибо Асаду за его пост.

Answer 7

Я решил ту же проблему с 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%");
    }

Answer 8

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

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

или

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

Answer 9

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

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

Answer 10

Попробуйте с этим 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>

Еще одна альтернатива, если вы хотите, чтобы основной экран настраивал экран EqualHeight