Липкий нижний колонтитул Bootstrap 4 не снизу

Question

Я работаю с интерфейсом веб-приложения с Bootstrap 4 и пытаюсь создать нижний колонтитул, прикрепленный к нижней части области просмотра, независимо от того, переместит ли содержимое его вниз или нет. Также кажется, что этот вопрос задавался несколько раз прежде, но ни одно из решений, кажется, не решает мою проблему. Другими словами, я пытаюсь создать нижний колонтитул, который начинается в нижней части страницы, если содержимое не заполняет страницу; тем не менее, я не хочу фиксированный нижний колонтитул, который закрывает содержимое, когда страница прокручивается.

Вот то, что у меня есть HTML:

        <footer class="container-fluid text-center py-5 mt-auto footer" id="footer">
            <div class="row mx-auto footer-row">
                <div class="col-md-12"></div>
                <div class="col-12 col-md">
                    <i class="fas fa-dna footer-dna fa-2x"></i>
                </div>
                <div class="col-6 col-md">
                    <h5>Features</h5>
                    <ul class="list-unstyled text-small">
                        <li><a href="#">Cool stuff</a></li>
                        <li><a href="#">Random feature</a></li>
                        <li><a href="#">Team feature</a></li>
                        <li><a href="#">Stuff for developers</a></li>
                        <li><a href="#">Another one</a></li>
                        <li><a href="#">Last time</a></li>
                    </ul>
                </div>
                <div class="col-6 col-md">
                    <h5>Resources</h5>
                    <ul class="list-unstyled text-small">
                        <li><a href="/newsletter">Sign Up For Email</a></li>
                        <li><a href="#">Resource name</a></li>
                        <li><a href="#">Another resource</a></li>
                        <li><a href="#">Final resource</a></li>
                    </ul>
                </div>
                <div class="col-6 col-md">
                    <h5>About</h5>
                    <ul class="list-unstyled text-small">
                        <li><a href="#">Team</a></li>
                        <li><a href="#">Locations</a></li>
                        <li><a href="#">Privacy</a></li>
                        <li><a href="#">Terms</a></li>
                    </ul>
                </div>
            </div>
    </footer>

В том виде, в каком оно есть сейчас, нижний колонтитул находится ниже конечного содержимого на странице и не обязательно внизу, в зависимости от объема содержимого. Вот кодовая ручка с HTML и CSS: https://codepen.io/franchise/pen/LYpjxYM. Что мне здесь не хватает? Заранее спасибо за помощь.

Answer 1

#footer {
  background-color: #951010;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  color: #FFF;
}

Замените класс нижнего колонтитула следующим.