粘性頁腳引導程序 4 不在底部

Question

我正在使用帶有 Bootstrap 4 的 web 應用程序前端，並且正在嘗試制作一個粘在視口底部的頁腳，無論內容是否將其強制到底部。 這個問題似乎也被問過多次，但似乎沒有一個解決方案能解決我的問題。 換句話說，如果內容沒有填滿頁面，我正在嘗試創建一個從頁面底部開始的頁腳； 但是，我不想要在頁面可滾動時覆蓋內容的固定頁腳。

這是我到目前為止的 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;
}

用這個替換頁腳 class。