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;
}

以此替换页脚类。

粘性页脚引导程序4不在底部

1 个答案: