CSS & HTML5: поместите <footer>внизу страницы?нет обертки? - PullRequest
Новая
       0

CSS & HTML5: поместите <footer>внизу страницы?нет обертки?

12 голосов
/ 10 августа 2011

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

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

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

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

Ответы [ 8 ]

15 голосов
/ 12 июня 2013

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

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/

10 голосов
/ 10 августа 2011

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

2 голосов
/ 10 августа 2011

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

1 голос
/ 03 июля 2015

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

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 */
}
1 голос
/ 10 августа 2011

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

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

1 голос
/ 10 августа 2011

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

0 голосов
/ 20 мая 2016

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

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

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

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

РЕДАКТИРОВАТЬ: альтернативное решение (нет необходимости в CSS): 

/* footer */
if ($("body").height() < $(window).height()) { /* if the page is not long enouth, let's put some more margin to the footer */
    var height = $(document).height() - $("body").height();
    document.querySelector("footer").style.marginTop = height + "px";
}
0 голосов
/ 02 сентября 2013

Проверьте 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'
     }); 

  });

});
...