如何在页面末尾创建引导页脚（在页面顶部不可见）？

Question

我有一个网站，其中一些页面有很多元素（存在滚动），而其他页面只有很少的元素（不存在滚动）。我想要做的是让我的页脚始终位于页面底部，无论该页面有多大或多小。

我使用的引导页脚如下：

<footer class="text-center text-white bg-dark text-center">

    <!-- Section: Links  -->
    <section class="">
        
      <div class="container text-center text-md-start mt-5">
        <!-- Grid row -->
        <div class="row mt-3">
          <!-- Grid column -->
          <div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
            <!-- Content -->
            <h6 class="text-uppercase fw-bold">Sun Dance Services</h6>
            <hr
                class="mb-4 mt-0 d-inline-block mx-auto"
                style="width: 60px; background-color: #7c4dff; height: 2px"
                />
            <p>
              Here you can use rows and columns to organize your footer
              content. Lorem ipsum dolor sit amet, consectetur adipisicing
              elit.
            </p>
          </div>

          <!-- Grid column -->
          <div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
            <!-- Links -->
            <h6 class="text-uppercase fw-bold">Countries</h6>
            <hr
                class="mb-4 mt-0 d-inline-block mx-auto"
                style="width: 60px; background-color: #7c4dff; height: 2px"
                />
            <p><i class="fas fa-home mr-3"></i>United Kingdom</p>
            <p><i class="fas fa-envelope mr-3"></i>Cyprus</p>
            <p><i class="fas fa-phone mr-3"></i>Ireland</p>
            <p><i class="fas fa-print mr-3"></i>United States</p>
          </div>

          <!-- Grid column -->
          <div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
            <!-- Links -->
            <h6 class="text-uppercase fw-bold">Useful links</h6>
            <hr
                class="mb-4 mt-0 d-inline-block mx-auto"
                style="width: 60px; background-color: #7c4dff; height: 2px"
                />
            <p>
              <%= link_to 'Home Page', root_path, class:"text-white" %>
            </p>
            <p>
              <%= link_to 'About Us', home_about_path, class:"text-white" %>
            </p>
            <p>
              <%= link_to 'Products & Services', home_products_path, class:"text-white" %>
            </p>
          </div>

          <!-- Grid column -->
          <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
            <!-- Links -->
            <h6 class="text-uppercase fw-bold">Contact</h6>
            <hr
                class="mb-4 mt-0 d-inline-block mx-auto"
                style="width: 60px; background-color: #7c4dff; height: 2px"
                />
            <p><i class="fas fa-home mr-3"></i> New York, NY 10012, US</p>
            <p><i class="fas fa-envelope mr-3"></i> info@example.com</p>
            <p><i class="fas fa-phone mr-3"></i> + 01 234 567 88</p>
            <p><i class="fas fa-print mr-3"></i> + 01 234 567 89</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Copyright -->
    <div
         class="text-center p-3"
         style="background-color: rgba(0, 0, 0, 0.2)"
         >
      © 2021 Copyright:
      <a class="text-white" href="https://mdbootstrap.com/"
         >Sun Dance Services</a
        >
    </div>

</footer>

我尝试了<footer class="text-center text-white bg-dark text-center fixed-bottom">，它仅针对小内容页面解决了这个问题。它将页脚设置在最低位置（此处不存在滚动）。查看屏幕截图 1！

但是，当页面很大时，有两个问题：

• 页脚始终出现在页面底部（当滚动位置位于页面顶部时，页脚出现）。
• 页脚隐藏位于末尾的元素（请参阅下面的屏幕截图 2）。

---

我想做什么：

1. 无论内容大小，页脚都应放在页面末尾。
2. 当滚动不在页面底部时隐藏页脚。
3. 我不想固定页脚。
4. 如果我使用普通的 bootsrap 而不是 CSS，我会更喜欢。

Answer 1

你可以为body标签设置最小高度，这样无论body的高度如何，你都会强制页脚位于底部