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显示在页面底部，您可以在此处看到：

我正在使用Firefox。顺便说一下，我遇到了麻烦，因为当我用Chrome打开页面时，我有这样的观点：

正如您所看到的，当您使用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/

Answer 2

尝试将bottom: 0;添加到您的CSS中。

工作小提琴：http://jsfiddle.net/gzX7y/

使用chrome无法正确显示CSS底栏

2 个答案: