时间戳

首页 > 解决方案 > 如何让我的页脚在所有设备中保持在底部？

html - 如何让我的页脚在所有设备中保持在底部？

问题描述

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

你可以在这里查看网站。

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

在此处输入图像描述

这是我的代码。我正在使用引导程序 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 -->

标签： htmlcssbootstrap-4

解决方案

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

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

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

推荐阅读