如何让我的页脚在所有设备中保持在底部？ [复制]答案

【问题标题】：How can I make my footer stay at the bottom in all devices? [duplicate]如何让我的页脚在所有设备中保持在底部？ [复制]
【发布时间】：2021-02-09 19:26:03
【问题描述】：

无论页面内容如何，我都需要将页脚留在页面底部（但不粘滞）。我已经在this question 上尝试过解决方案，但添加margin-top: 40em 的想法似乎并不是最好的解决方案。其他人将此问题标记为与this one 重复，但他们的解决方案对我不起作用，因此提出了这个新问题。

您可以查看网站here.

这是我的页脚在大屏幕上的样子：

这是我的代码。我正在使用引导程序 4。

.footer-container {
  margin-top: 30px;
  border-top: 1px solid #C1CFDF;
  padding: 20px;
  font-size: 0.9em;
}

<!-- Footer -->
<div class="footer">
  <div class="col-12 footer-container">
    <div class="col-12 footer-secondary text-center">
      <div class="row">
        <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 col-12">
          <ul class="nav nav-left">
            <li>¿Necesitas ayuda? Contacta <a href="mailto:email@email.com" target="_blank">email@email.com</a></li>
          </ul>
        </div>
        <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 col-12">
          <ul class="nav nav-right">
            <li class="nav-item dropup">
              <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Country<i class="far fa-chevron-up pl-2"></i></a>
            </li>
            <li class="nav-item dropup">
              <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Languages<i class="far fa-chevron-up pl-2"></i></a>
              <div class="dropdown-menu dropdown-menu-right">
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- /Footer -->

【问题讨论】：

可能是 stackoverflow.com/questions/51480958/… 的副本。但是你的页脚，你想要它粘还是不粘？
不粘。我只需要它保持在底部，无论我的页面信息很少还是信息很多。
好的，所以你有一个重复的问题，我会将你的问题链接到它。玩得开心编码
您能否展示您如何尝试在重复问题中实施解决方案？然后我们可以重新打开并确定如何修复它。
如果副本不适合您，请添加页面的其余部分以澄清您的问题，正如我回答的那样，如果您使用引导程序，页脚是您拥有的整个布局的一部分并且已经如此看来。您可能不理解我的答案或那里的副本，但如果没有更多关于您真正拥有什么以及您真正尝试什么的信息，我们无能为力提供帮助；）一个人会回答固定或绝对的位置，另一个网格，还有一些边距，...

标签： html css bootstrap-4

【解决方案1】：

将位置设置为“绝对”，底部设置为“0”。像这样：

.footer-container {
  margin-top: 30px;
  border-top: 1px solid #C1CFDF;
  padding: 20px;
  font-size: 0.9em;
position: absolute; 
bottom: 0;
}

这会将页脚固定在底部，但如果页面可以滚动，那么它将位于页面的最底部而不是视口！

【讨论】：

这样适用于大屏幕（> 1200px）。但是在我笔记本的屏幕上，页脚与内容重叠。有没有办法在不使用媒体查询的情况下解决这个问题？

【解决方案2】：

如果您使用的是基于 flex 模型的 bootstrap 4.x，您应该考虑布局的全局性，而不是页脚本身。

在您阐明 html 的主要结构之前，我猜该网站位于 .container 中，所以这里有一个示例：

body {
  height: 100vh;
}

.footer-container {
  border-top: 1px solid #C1CFDF;
  padding: 20px;
  font-size: 0.9em;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container h-100 d-flex flex-column">

  <!-- header ? -->
  <div class="row">header</div>
  <!-- / header  -->
  
  <!-- main ? -->
  <main> Main content</main>
  <!-- / main  -->
  
  <!-- Footer -->
  <div class="footer mt-auto">
    <div class="col-12 footer-container">
      <div class="col-12 footer-secondary text-center">
        <div class="row">
          <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 col-12">
            <ul class="nav nav-left">
              <li>¿Necesitas ayuda? Contacta <a href="mailto:email@email.com" target="_blank">email@email.com</a></li>
            </ul>
          </div>
          <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 col-12">
            <ul class="nav nav-right">
              <li class="nav-item dropup">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Country<i class="far fa-chevron-up pl-2"></i></a>
              </li>
              <li class="nav-item dropup">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Languages<i class="far fa-chevron-up pl-2"></i></a>
                <div class="dropdown-menu dropdown-menu-right">
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- /Footer -->
  </div>

使用的内置类：h-100 d-flex flex-column 和 mt-auto

【讨论】：