Прижать футер к низу страницы

#html #css #вёрстка

Доброго времени суток, вопрос заезженный. В гугле есть информация , но во всех примерах
нужно оборачивать ненужным div блоком. подскажите пожалуйста можно ли обойтись без
него. Например есть вот такая вот структура


    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt sequi


    
Lorem ipsum dolor sit amet, consectetur adipisicing elit,


    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. taque cupiditate
quas quasi soluta.



можно ли как то сдесь прижать футер, не оборачивая его ? в див лишний, спасибо
    

Ответы

Ответ 1

Самый простой вариант - через position: absolute;:

position: absolute; 
bottom: 0px;


Ответ 2

На случай, когда нет возможности использовать дополнительную оберку, но нужно железобетонное
решение я написал эту функцию на jQuery:

$(document).on('ready', stickyFooter);
$(window).on('resize', stickyFooter);
function stickyFooter() {
    var $footer = $('.footer');
    $footer.siblings('.spacer').remove();
    var contentHeight = $('body').height(),
        windowHeight = $(window).height();
    if(contentHeight < windowHeight) {
        $footer.before('
');
    }
}


Ответ 3

1. Решение через абсолютное позиционирование для фиксированной высоты футера



html {
  /* Растягиваем документ на всю высоту окна */
  height: 100%;
}

body {
  position: relative;
  /* Растягиваем body по высоте html */
  min-height: 100%;
}

main {
   /* Выставляем отступ с высотой footer */
  padding-bottom: 30px;
}

footer {
  /* Позиционируем footer внизу main */
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Высота footer */
  height: 30px;
}

  

   header
  
  

   content
  
  

   footer
  





2. Решение через Flexbox для адаптивной высоты футера



body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  /* Чтобы занимал оставшееся пространство */
  flex-grow: 1;
}

footer {
  /* Чтобы footer не уменьшался */
  flex-shrink: 0;
}

  header


  content


  footer





3. Решение через таблицы для адаптивной высоты футера



body {
  display: table;
  min-height: 100vh;
}

main {
  display: table-row;
  /* Чтобы ряд занимал всё оставшееся пространство, так как табличная разметка не
позволит ему вытолкнуть header и footer */
  height: 100%;
}

  header


  content


  footer





4. Решение с использованием jQuery для адаптивной высоты футера



// Высчитываем высоту footer и делаем соответствующий отступ от main:
function footer(){
$('main').css('padding-bottom',$('footer').height());
}
window.addEventListener('load',footer);
window.addEventListener('resize',footer);
html {
  /* Растягиваем документ на всю высоту окна */
  height: 100%;
}

body {
  position: relative;
  /* Растягиваем body по высоте html */
  min-height: 100%;
}

main {
   /* Выставляем отступ с высотой footer по умолчанию */
  padding-bottom: 30px;
}

footer {
  /* Позиционируем footer внизу main */
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Высота footer по умолчанию */
  height: 30px;
}


 


  

   header
  
  

   main
  
  

   footer