Липкий нижний колонтитул внизу без перекрытия

Question

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

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

Вот мой код

<div id="content">   
    <a href="item.html"> 
     <div class="col-xs-12 col-md-6 col-lg-3 item"> 
      <div class="opacity"></div> 
      <div class="box_bg"> 
       <h4 class="color1">Headline</h4> 
       <p>Description</p>      
      </div> 
     </div> 
    </a> 
    <a href="item.html"> 
     <div class="col-xs-12 col-md-6 col-lg-3 item"> 
      <div class="opacity"></div> 
      <div class="box_bg"> 
       <h4 class="color1">Headline</h4> 
       <p>Description</p> 
      </div> 
     </div> 
    </a> 
</div> 
<footer class="bar bar-tab">   
    <a class="tab-item" href="#"> 
     Home 
    </a> 
</footer> 

CSS:

#content{ 
    min-height: 100%; 
} 
footer{ 
    height: 50px; 
    position: relative; 
    bottom: 0; 
} 

Answer 1

Если я понимаю, что вы хотите, вам нужно сделать положение нижнего колонтитула: исправлено; и добавьте нижнюю часть к вашему контейнеру.

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

https://jsfiddle.net/c0Lrcg4s/

#content{ 
    min-height: 100%; 
    padding-bottom:60px; 
} 
footer{ 
    height: 50px; 
    position: fixed; 
    bottom: 0; 
} 

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

Answer 2

Попробуйте изменить CSS, чтобы за нижние колонтитулы absolute расположены:

footer{ 
    height: 50px; 
    position: relative; 
    bottom: 0 
} 

Codepen демо: http://codepen.io/anon/pen/NRxQQP

Answer 3

Вы можете сделать это с помощью jQuery, потому что вам нужна высота вашего «окна». В JQuery вы можете написать:

var height = $(window).height(); 
$("#content-wrapper").css({height : height}); 

Конечно, вы можете уменьшить высоту на высоту нижнего колонтитула и заголовка, так что вы увидите футер при открытии страницы.

Лучший способ получить эту переменную высоты - внутри .resize() fincton.

Тогда в CSS вы можете установить:

#content-wrapper{ 
position:relative; 
} 
.footer{ 
position: absolute; 
bottom: 0; 
} 

.footer и #content должно быть внутри # содержимого обертки

Answer 4

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

footer{ 
    height: 50px; 
    **position: fixed;** 
    bottom: 0; 
}