Липкий вместо неподвижного нижнего колонтитула

Question

У меня есть полная ширина #body-container и фиксированная ширина .bg-container. Оба они составляют минимум 100% от доступной высоты.

Так что мой нижний колонтитул снова на вершине этого - на данный момент. Но я хочу, чтобы это было после #body-container.

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

As pen

html, 
 
body { 
 
    height: 100%; 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
#body-container { 
 
    height: 100%; 
 
    min-height: 100%; 
 
    overflow:auto; 
 
    background-color: red; 
 
} 
 

 
.bg-container { 
 
    width: 920px; 
 
    margin: 0 auto; 
 
    background-color: blue; 
 
    min-height: 100%; 
 
} 
 

 
.pseudo-content{ 
 
    background: yellow; 
 
    height: 1000px; 
 
} 
 

 
footer{ 
 
    background: green; 
 
    height: 50px; 
 
}

<div id="body-container"> 
 
    
 
    <div class="bg-container"> 
 
    <div class="pseudo-content">content</div> 
 
    </div> 
 
    
 
</div> 
 

 

 
<footer> 
 
    footer 
 
</footer>

Answer 1

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

Затем, просто добавьте следующие стили к вашему footer:

position: fixed; 
bottom: 0; 
width: 100%; 

Complete:

footer { 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    background: green; 
    height: 50px; 

}