Хранение нижнего колонтитула HTML в нижней части окна, если страница короткая

Некоторые мои веб-страницы короткие. На этих страницах нижний колонтитул может оказаться в середине окна, а ниже нижнего колонтитула - пробел (в белом). Это выглядит уродливо. Я хотел бы, чтобы нижний колонтитул находился в нижней части окна, а ограниченное содержание тела просто растягивалось.

Однако, если веб-страница длинна, и вам нужно прокрутить, чтобы увидеть нижний колонтитул (или все это), тогда все должно вести себя как обычно.

Каков правильный способ сделать это с помощью CSS? Мне нужен Javascript/jQuery, чтобы это произошло?

Мне все равно, что IE9 + и современные версии других браузеров. Высота нижнего колонтитула также может меняться со страницы на страницу, поэтому я не хочу полагаться на высоту.

Ответ 1

Просмотрите этот сайт. У него есть хороший учебник о том, как это сделать с помощью css.

Я скопировал его css на всякий случай, когда сайт Мэтью снят.

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

ИЗМЕНИТЬ

Поскольку высота нижнего колонтитула отличается от страницы к странице, вы можете получить высоту нижнего колонтитула, а затем отрегулировать нижнюю часть #body с помощью javascript. Вот пример использования jquery.

$(function(){
    $('#body').css('padding-bottom', $('#footer').height()+'px');   
});

Ответ 2

Дайте это попробовать.

Это копия стилей, которые использует Github, чтобы поддерживать нижний колонтитул внизу страницы. Он немного взломан и требует, чтобы вы знали высоту вашего нижнего колонтитула (что может не сработать для вашего варианта использования)

Разметка

<div class="wrapper">
<div class="content"><p>Page Content</p></div>
<div class="footer-push"></div>
</div>

<footer>
  <p>footer-text</p>
  <img src="http://placekitten.com/100/100" alt="footer image">
</footer>

CSS (ну, scss)

// our page element

html {
height:100%;
}

body {
height:100%;
}
.wrapper {
background:gray;
min-height:100%;
height: auto !important; // the magic!
height:100%;
margin-bottom:-158px; // the height of our footer + margin
}

.footer-push {
clear:both;
height:158px; // the height of our footer + margin
}

footer {
background:rgba(#a388a3,0.8);
margin-top:20px;
height:138px;
}

Важные вещи здесь выглядят так:

Высота установки: 100% на содержащих элементы (esp html и body)
Знание высоты нижнего колонтитула и учет его с помощью элемента "push"
используя комбинацию min-height height: auto !important и height:100%

Надеюсь, что это поможет!

Ответ 3

HTML

<body>
    <div class="example">
        <p>Lorem ipsum dolor sit amet consectetur...</p>
    </div>

    <footer>
        <ul>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
        </ul>
    </footer>
</body>

CSS

body {
    min-height: 100%;
}

footer {
    position: absolute;
    bottom: 0;
}

Ответ 4

Нет, это очень просто установить минимальный для вашего роста.

вот так: мин-высота: 500px; то минимальная высота составляет 500 пикселей.

Ответ 5

используйте свойство min-height, хотя и не полностью надежное, поскольку некоторые более старые версии могут его не поддерживать. Бросьте в некоторый javascript, если вы не возражаете.