Question

我的网站上有一个页脚，它始终位于可见屏幕的底部。我添加了以下CSS，以便在调整浏览器大小时使屏幕保持居中：

CSS

  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  min-width:600px;

现在页脚不再粘在可见屏幕的底部。在包含大量内容的页面上，页脚位于页面的最底部，但在内容很少的页面上，它只是浮动在页面的中心。

这是页脚CSS：

Footer.css

 #footer{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    min-width:100%;
    width:100%;
    height:50px;
    opacity:0.8;
}

这是一个前后的形象，它的作用和现在看起来像：

之前＆amp;之后

有人可以帮忙解决这个问题吗？

谢谢！

Answer 1

问题是由translateX标记上应用的HTML引起的，因此请尝试删除该样式以应用HTML标记。

为了解决此问题，请尝试为您的内容添加包装 <div id="main">并在#main{}处应用您的样式。

这里的实例：

一般来说，如何将页脚保持在屏幕底部是好的，但如果您使用HTML上的translateX移动包含页脚的内容，则您的位置不再作为用户案例保留。