Сделать липкий div в сетке бутстрапа

Question

Я ищу способ сделать div липким на дне, как нижний колонтитул, но внутри сетки бутстрапа, поэтому не по всей ширине.

Bootstrap has an example of a sticky footer, я попытался настроить его, чтобы он работал в моем случае, но не смог.

This - еще один подход, но также предполагает, что ваш липкий div не вложен внутри другого div.

Ниже мой код, мне нужно сделать .app-footer липким на дно по ширине его родительского div.

<div class="row main"> 
    <div class="col-xs-2 col-md-4 col-lg-5">...</div> 

    <div class="col-xs-8 col-md-4 col-lg-2"> 
    <div class="app"></div> 
    <div class="app-footer"></div> 
    </div> 

    <div class="col-xs-2 col-md-4 col-lg-5">...</div> 
</div> 

Изменить: CSS Я пытался, но не работает:

html, 
body { 
    height: 100%; 
} 

/* Wrapper for page content to push down footer */ 
.app { 
    min-height: 100%; 
    height: auto; 
    /* Negative indent footer by its height */ 
    margin: 0 auto -60px; 
    /* Pad bottom by footer height */ 
    padding: 0 0 60px; 
} 

/* Set the fixed height of the footer here */ 
.app-footer { 
    height: 60px; 
    background-color: #f5f5f5; 
} 

Edit: Хорошо, понял. По-видимому, решение состоит в том, чтобы добавить {position: relative; height: 100%} для ВСЕХ родительских div. В моем случае у меня была сетка, завернутая в <div class="row">, когда я добавил ее там тоже, это сработало.

Answer 1

Вы могли бы попробовать это в вашем CSS:

.app-footer{ 
    position: absoute; 
    bottom: 0px 
    width: 100%; 
    height: 80px; 
    background-color: red; 
} 

Answer 2

, если вы хотите сделать вложенную ребенка DIV, расположенный в нижней части родительского DIV:

надстройкой {позицию: относительная} в CSS родительского div; добавьте {position: absolute; bottom: 0} в css дочернего div;

вложенная DIV должен быть такой же ширины, как родитель (taknig с учетом отступов и полей), но вы могли бы заставить его быть, добавив ширина: 100% CSS дочернего Div в

Answer 3

Используйте этот CSS чтобы сделать ваш app-footer div липким:

.app-footer { 
    height: 60px; 
    background-color: #f5f5f5; 
    position: fixed; 
    bottom:0px; 
    left:0px; 
}