CSS липкий колонтитул |Нижний колонтитул без фиксированной высоты - PullRequest
Новая
       4

CSS липкий колонтитул |Нижний колонтитул без фиксированной высоты

6 голосов
/ 12 декабря 2010

Я использовал липкий нижний колонтитул много раз из http://www.cssstickyfooter.com/. Единственная проблема заключается в том, что нижний колонтитул имеет фиксированную высоту.Существует ли чистое CSS-решение, позволяющее расширять колонтитулы в зависимости от содержимого внутри?

Решение JS не будет плохим, но CSS будет лучшим.

Заранее спасибо за помощь.

Ответы [ 7 ]

5 голосов
/ 10 ноября 2011
5 голосов
/ 12 декабря 2010

Обновленный ответ

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

Вместо этого я бы рекомендовал вам привязать к window.onresizeсобытие, но throttle логика такова, что мы не вычисляем стили, перебиваем DOM и вызываем макеты десятки раз в секунду : 

(function () {

    "use strict";

    var body = document.querySelector( "body" );
    var footer = document.querySelector( "footer" );

    window.addEventListener(
        // Throttle logic: http://jsfiddle.net/jonathansampson/7b0neb6p/
        "resize", throttle( adjustContainerPadding(), 500 )
    );

    function adjustContainerPadding () {
        body.style.paddingBottom = window.getComputedStyle( footer ).height;
        return adjustContainerPadding;
    }

}());

Когдастраница загружается, мы немедленно запускаем метод adjustContainerPadding.Этот метод устанавливает paddingBottom тела в соответствии с вычисленной высотой footer.Обратите внимание, что для метода window.getComputedStyle требуется IE9 или выше.

Fiddle: http://jsfiddle.net/jonathansampson/7b0neb6p/

Оригинальный ответ

Я бы рекомендовалВы (для простоты) просто используете код cssstickyfooter и устанавливаете значения css с помощью javascript (код jQuery следует). 

$(function(){
  var footerHeight = $("#footer").height();
  $("#main").css("padding-bottom", footerHeight);
  $("#footer").css("margin-top", -footerHeight);
});

код не проверен, но должен нормально работать

Независимо от того, сколько контента у вас в нижнем колонтитуле, это автоматически сбросит значения CSS для вас.

2 голосов
/ 25 ноября 2016

Я действительно не знаю, почему все не используют эту технику.Это так просто

НЕТ ФИКСИРОВАННОЙ ВЫСОТЫ, JAVASCRIPT ИЛИ ТАБЛИЦЫ

Расширяется, когда больше контента, а когда его нет, прилипает к низу 

*{
  margin: 0; 
  padding: 0;
}
html, body{
  height: 100%; 
}
body{
  min-height: 100%;
  display: flex;
  flex-direction: column;
  
}
.content{
  flex: 1;
  background: #ddd;
}
<body>
  <header>
    Header
  </header>
  
  <div class='content'>
    This is the page content
    <br>
    PS. Don't forget the margin: 0 and padding: 0 to avoid scrollbars (this can be also put into the   body css)
  </div>
  
  <footer>
    Footer
  </footer>
</body>
2 голосов
/ 05 февраля 2016

ТАБЛИЦА ДИСПЛЕЯ = НЕТ JS и НЕТ фиксированной высоты!

Работает в современных браузерах (IE 8+) - я протестировал его в нескольких браузерах, и все, похоже, работало хорошо.

Я обнаружил это решение, потому что мне нужен липкий нижний колонтитул без фиксированной высоты и без JS. Код ниже.

Объяснение: По сути, у вас есть контейнерный элемент div с 2 дочерними элементами: оболочкой и нижним колонтитулом. Поместите все необходимое на странице (кроме нижнего колонтитула) в обертку. Контейнер установлен на display: table; Оболочка установлена ​​на display: table-row; Если вы установите html, body и wrapper на height: 100%, нижний колонтитул будет придерживаться дна.

Нижний колонтитул также установлен на display: table;. Это необходимо, чтобы получить запас дочерних элементов. Вы также можете установить нижний колонтитул на display: table-row; Это не позволит вам установить margin-top на нижний колонтитул. В этом случае вам нужно проявить творческий подход, используя больше вложенных элементов.

Решение: https://jsfiddle.net/0pzy0Ld1/15/

и с большим содержанием: http://jantimon.nl/playground/footer_table.html

/* THIS IS THE MAGIC */

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
html,
body {
  margin: 0;
  padding: 0;
}
html,
body,
#container,
#wrapper {
  height: 100%;
}
#container,
#wrapper,
#footer {
  width: 100%;
}
#container,
#footer {
  display: table;
}
#wrapper {
  display: table-row;
}
/* THIS IS JUST DECORATIVE STYLING */

html {
  font-family: sans-serif;
}
#header,
#footer {
  text-align: center;
  background: black;
  color: white;
}
#header {
  padding: 1em;
}
#content {
  background: orange;
  padding: 1em;
}
#footer {
  margin-top: 1em; /* only possible if footer has display: table !*/
}
<div id="container">
  <div id="wrapper">
    <div id="header">
      HEADER
    </div>
    <div id="content">
      CONTENT
      <br>
      <br>some more content
      <br>
      <br>even more content
    </div>
  </div>
  <div id="footer">
    <p>
      FOOTER
    </p>
    <br>
    <br>
    <p>
      MORE FOOTER
    </p>
  </div>
</div>
1 голос
/ 11 декабря 2015

Следующий метод чрезвычайно прост и обеспечивает адаптацию нижнего колонтитула при изменении размера окна.

Вдохновение от https://getbootstrap.com/examples/sticky-footer/ и http://blog.mojotech.com/responsive-dynamic-height-sticky-footers/

CSS 

html {
  position: relative;
  min-height: 100%;
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

JS 

function positionFooter() {
  $("main").css("padding-bottom", $("footer").height());
}

// Initally position footer
positionFooter();

// Reposition footer on resize
$(window).resize(function() {
  positionFooter();
});
0 голосов
/ 12 декабря 2010

зацените, вам будет полезно 

var margin;
$(function(){
    var pageHeight = $('#pageKeeper').height();
    var clientHeight = window.innerHeight || document.documentElement.clientHeight;</p>

<code>if (clientHeight > pageHeight) {
    margin = clientHeight - pageHeight;
    if (margin <= 120) {
        $('#footer').css('top', pageHeight + 30)
    }
    else {
        $('#footer').css('top', clientHeight - 90)
    }
}
else {
    margin = pageHeight - clientHeight;
    $('#footer').css('top', pageHeight + 30)
}
$('#footer').show()
</code>

})

0 голосов
/ 12 декабря 2010

Убедитесь, что он работает во всех браузерах, но попробуйте:

#footer { position:absolute; top:100%; width:100%; }

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...