Div不会停留在可见屏幕的底部

时间:2015-11-13 10:31:13

标签: html css

我的网站上有一个页脚,它始终位于可见屏幕的底部。我添加了以下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;
}

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

之前&之后

enter image description here

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

谢谢!

1 个答案:

答案 0 :(得分:1)

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

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

这里的实例:

https://jsfiddle.net/cwmz9r7u/1/

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