Получение содержимого для прокрутки с остальной частью страницы

Question

Я пытаюсь расширить свой контент с помощью контейнера div, но вместо этого он отключается.

Вот мой HTML код:

<div id="container"> 
<section> 
Lots of content goes here 
</section> 
</div> 
<div class="footer">Footer Content</div> 

Мой CSS код:

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

body { 
    width: 100%; 
    height: 100%; 
    background: #ECECEC; 
    overflow: auto; 
} 

#container { 
    width: 80%; 
    margin: 0 auto; 
    background: white; 
    height: 100vh; 
} 

section { 
    overflow: auto; /* Trying to make content scrollable */ 
} 

.footer { 
      width: 100%; 
      position: absolute; 
      left: 0; 
      bottom: 0; 

} 

Колонтитул появляется перекрываться часть содержания в нижней части. Я искал ответы на вопросы, и кажется, что позиционирование нижнего колонтитула может вызвать эту проблему. Есть ли способ, чтобы содержимое расширялось с помощью div контейнера и продолжало иметь нижний колонтитул внизу в моем случае?

Answer 1

Есть две проблемы с CSS:

1. Вы должны использовать min-height: 100vh; для #container. Это говорит о том, что высота должна быть не менее 100vh и при необходимости должна расти выше.
2. Вы должны использовать position: fixed; для .footer. Это обеспечит, чтобы нижний колонтитул оставался на месте независимо от вертикальной прокрутки страницы.