时间戳

首页 > 解决方案 > 将页脚固定到页面底部

html - 将页脚固定到页面底部

问题描述

如何在居中时将页脚固定到页面底部？我这辈子都想不通。

我希望页脚以 50% 的比例位于页面底部的中心，但由于某种原因，左右边距不起作用。它坐在左边。

.navigation2 {
  padding: 8px;
  background-color: #888;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  position: fixed;
  bottom: 0px;
}
<footer>
  <div class="navigation2">
    &copy; 2019 - <a href="index.html">X</a>
  </div>
</footer>

任何帮助将不胜感激。

标签： htmlcss

解决方案

你可能只需要一点不同的数学方法。这可能会让你更接近你正在寻找的东西：

CSS：

.navigation2 {
    padding: 8px;
    background-color:#888;
    left: 25%;
    right: 25%;
    position: fixed;
    bottom: 0px;
}

另一种你可以做到的方式更加动态（无论页脚的宽度如何）并且可以更好地缩放，因此你的页脚在小屏幕上不会被挤压得那么大：

.navigation2 {
    padding: 8px;
    background-color:#888;
    left: 50%;
    transform:translatex(-50%);
    position: fixed;
    bottom: 0px;
}

推荐阅读