CSS и HTML5: расположите <нижний колонтитул> внизу страницы? нет обертки?

возрастная проблема. Мне нужно разместить элемент <footer> в нижней части страницы. Однако у меня нет обертки div.

У меня есть следующая структура...

<body>
<header>
<section id="content">
<footer>
</body>

Есть ли простой способ подтолкнуть нижний колонтитул снизу, если контент недостаточно высок?

Ответ 1

AFAIK это лучший способ получить нижний колонтитул в нижней части страницы:

http://www.themaninblue.com/experiment/footerStickAlt/

Ответ 2

Пришел к этому вопросу и подумал, что я опубликую то, с чем я столкнулся. Кажется, это идеальный способ для меня.

CSS

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

HTML5:

<!DOCTYPE html>
<head>
    <title></title>
</head>
<body>
    <nav></nav>
    <article>Lorem ipsum...</article>
    <footer></footer>
</body>
</html>

Кредит распространяется на http://mystrd.at/modern-clean-css-sticky-footer/

Ответ 3

Сделать position: fixed; bottom: 0, height: xxx? Конечно, тогда он перекрывал бы любой контент, если бы страница действительно проходила мимо нижней части окна. Возможно, некоторые JS обнаруживают "короткое" содержимое и задают css по мере необходимости.

Ответ 4

В зависимости от вашего кода это может не сработать, но я бы предложил установить body на position:relative;, а затем установить footer на position:absolute; и bottom:0. Теоретически это не будет перекрывать вещи тогда.

Ответ 5

Я сделал jsfiddle раньше, проверьте это http://jsfiddle.net/kuyabiye/K5pYe/ попробуйте изменить размер окна результатов, если содержимое будет переполнено, прокрутка будет видели.

Ответ 6

Посмотрите Fiddle

HTML

<header>

</header>

<section id="content">

</section>

<footer>

</footer>

CSS

body {
  height: 100%;
}
footer {
  width: 100%;
  height: 200px;
}

JQuery

$(function() {

  var footer  = $('footer'),
      footHgt = $('footer').outerHeight(),
      bodyHgt = $('body').height();

  footer
    .css({
      position: 'absolute',
      left: '0',
      top: bodyHgt - footHgt + 'px'
     });

  $(window).resize(function() {

    var footer  = $('footer'),
        footHgt = $('footer').outerHeight(),
        bodyHgt = $('body').height();   

    footer
     .css({
       position: 'absolute',
       left: '0',
       top: bodyHgt - footHgt + 'px'
     }); 

  });

});

Ответ 7

Вот решение, которое отлично работает для меня. Прикреплено к низу, не перекрывается с контентом, нет необходимости в обертке.

https://jsfiddle.net/vq1kcedv/

HTML:

<!DOCTYPE html>
<head>
<title>Footer</title>
</head>
<body>
    <nav>Link1 Link2</nav>
    <article>content</article>
    <footer>Copyright</footer>
</body>
</html>

CSS

html, body {
    position: absolute;
    width: 100%;
    min-height: 100%;
    padding: 0;
    margin: 0;
}

body:after {
    line-height: 100px; /* height of footer */
    white-space: pre;
    content: "\A";
}

footer {  
    position: absolute;
    width: 100%;
    height: 100px; /* height of footer */
    bottom: 0px;
    margin-top: -100px; /* height of footer */
}

Ответ 8

Я знаю это старое сообщение, но я хотел бы предоставить свое собственное решение (с javascript):

/* css */
footer { width:100%; bottom:0; }

/* javascript */
if ($("body").height() < $(window).height()) {
    document.querySelector('footer').style = 'position:absolute;'
}

Он должен работать с любым нижним колонтитулом любого размера.

EDIT: альтернативное решение (нет необходимости в css):

/* footer */
if ($("body").height() < $(window).height()) { /* if the page is not long enouth, let put some more margin to the footer */
    var height = $(document).height() - $("body").height();
    document.querySelector("footer").style.marginTop = height + "px";
}