粘性页脚引导程序 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;
}

用这个替换页脚类。