html - CSS 底部栏未正确显示 chrome

Question

我的网页底部有一个栏，代码如下:

<div class="casa5">
<label style="margin:auto;"><font color="orange">&#9733;</font> my text <font color="orange">&#9733;</font></label>
</div>

在这里你可以看到CSS:

.casa5 {
 background-color:#0C0C0C;
 width:100%;
 height:24px;
 position:absolute;
 left: 0;
 right: 0;
 text-align:center;
 font: 90% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
 color:#E8E8E8;
}

此 div 显示在页面底部，如您所见:

我正在使用火狐浏览器。顺便说一句，我遇到了麻烦，因为当我用 Chrome 打开页面时，我有这个 View :

如您所见，当您使用 Firefox 打开页面时，该栏位于页面底部，但是当我使用 Chrome 加载同一页面时，我的 div 和底部之间有一个空隙。

我希望只有当我向下滚动到最后时，该栏才显示在页面底部。我该如何解决这个问题？

Answer 1

• 你只需要添加 bottom: 0 到你的 css:

  .casa5 {
      background-color:#0C0C0C;
      width:100%;
      height:24px;
      position:absolute;
      left: 0;
      right: 0;
      text-align:center;
      font: 90%'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
      color:#E8E8E8;
      bottom: 0;
  }
  

  此外，您可能应该将 position:absolute; 更改为 position: fixed;，以便无论用户是否滚动，它始终位于底部。

  Fiddle

• 但是，如果您希望它始终位于页面末尾，您可以这样做:

  html {
      position: relative;
  }
  .casa5 {
      background-color:#0C0C0C;
      width:100%;
      height:24px;
      position: absolute;
      left: 0;
      right: 0;
      text-align:center;
      font: 90%'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
      color:#E8E8E8;
      bottom: 0;
  }
  

  它将 html 更改为 position: relative 并将页脚保持在 position: absolute

  Fiddle

  根据 http://mystrd.at/modern-clean-css-sticky-footer/ 的建议