Нижний колонтитул внизу на страницах с небольшим содержанием

У меня есть страница с несколькими строками контента. Я хочу, чтобы нижний колонтитул был сдвинут на дно.

<div id="footer"></div>

Я не хочу использовать

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

AKA Липкий нижний колонтитул

Возможно ли это без jQuery?

любые предложения?

Ответ 1

Есть еще один липкий нижний колонтитул от Райана Фейта, который не использует фиксированное положение:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer height */
}
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}

Ответ 2

Вот решение, которое не требует, чтобы нижний колонтитул размещался вне основного элемента оболочки, а именно, как большинство людей структурируют свои страницы.

html,
body {
  margin: 0;
  height: 100%;
}

.wrapper {
  box-sizing: border-box;
  position: relative;
  padding-bottom: 1em; /* Height of footer */
  min-height: 100%;
}

header {
  background-color: #cff;
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  color: #fff;
  background-color: #000;
}

<div class="wrapper">
  <header>I am the header.</header>
  <article>I am content that doesn't fill the page. The footer will appear at the bottom of the browser window. However, when I do fill the page, you will need to scroll down to see the footer.</article>
  <footer>I am the footer.</footer>
</div>

Ответ 3

Попробуйте Sticky Footer Solution от Steve Hatcher

/*  
Sticky Footer Solution
by Steve Hatcher 
http://stever.ca
http://www.cssstickyfooter.com
*/

* {
    margin: 0;
    padding: 0;
}

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to the total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {
    height: 100%;
}

#wrap {
    min-height: 100%;
}

#main {
    overflow: auto;
    padding-bottom: 180px;
}

/* must be same height as the footer */

#footer {
    position: relative;
    margin-top: -180px; /* negative value of footer height */
    height: 180px;
    clear: both;
}

/*Opera Fix*/
body:before {
    /* thanks to Maleika (Kohoutec)*/
    content: "";
    height: 100%;
    float: left;
    width: 0;
    margin-top: -32767px; /* thank you Erik J - negate effect of float*/
}

/* IMPORTANT

You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.

<!--[if !IE 7]>
    <style type="text/css">
        #wrap {display:table;height:100%}
    </style>
<![endif]-->

*/

Ответ 4

Это решение Flexbox аккуратнее и намного проще в реализации:

HTML

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>

CSS

html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1 0 auto;
}
.footer {
  flex-shrink: 0;
}

Просто убедитесь, что вы заверните необходимые divs внутри body.

Ответ 5

Другой способ сделать это, если вы не знаете размер нижнего колонтитула, это использовать javascript и css.

html, body{
    height:100%;
    height:100%;
}

#footer{
    background-color: #292c2f !important;
    position:absolute;bottom:0px;
}

и часть Javascript

$(document).ready(function(){
        if ($(document).height() > $(window).height()) {
            $('#footer').css('position', 'relative');
        }
});

Вы можете легко сделать это с помощью другого подхода, установив минимальную высоту для тега перед тегом нижнего колонтитула.

.the-tag-before-footer{
     min-height:30%;
 }