2

我正在尝试将底部栏放在屏幕底部。我有一段 CSS 代码为我创建了条形图。但我无法将栏固定到底部。

CSS

.top_bar
{
    display:block;
    height:18px;
    margin-bottom:10px;
    margin-top:10px;

    background-image: linear-gradient(left bottom, rgb(135,30,51) 15%, rgb(90,115,183) 58%, rgb(90,116,183) 79%);
    background-image: -o-linear-gradient(left bottom, rgb(135,30,51) 15%, rgb(90,115,183) 58%, rgb(90,116,183) 79%);
    background-image: -moz-linear-gradient(left bottom, rgb(135,30,51) 15%, rgb(90,115,183) 58%, rgb(90,116,183) 79%);
    background-image: -webkit-linear-gradient(left bottom, rgb(135,30,51) 15%, rgb(90,115,183) 58%, rgb(90,116,183) 79%);
    background-image: -ms-linear-gradient(left bottom, rgb(135,30,51) 15%, rgb(90,115,183) 58%, rgb(90,116,183) 79%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        right 0,
        color-stop(0.15, rgb(135,30,51)),
        color-stop(0.58, rgb(90,115,183)),
        color-stop(0.79, rgb(90,116,183))
    );
}

我该如何解决这个问题？

我在下面尝试过这段代码，但我没有工作。它将条固定到底部，但渐变条缩小......

position: fixed;
bottom: 30px;
4

3 回答 3

3

只需将这三个添加到您的规则中，固定定位需要提及元素的宽度，因为它只是绝对定位的一种特殊形式：

position: fixed;
width: 100%;
bottom: 30px;

小提琴

于 2013-10-06T18:56:55.823 回答
3

如果使用absoluteor定位元素fixed，则元素的宽度不会像其他方式那样自动增长到 100%。如果您希望宽度为 100%，则需要手动设置。

代码：

.top_bar {
    position: fixed;
    bottom: 30px;
    display:block;
    height:18px;
    width: 100%; //Manually set width to 100%
    margin-bottom:10px;
    margin-top:10px;

    //Gradient stuff
}

示例：http ://codepen.io/skimberk1/pen/4eca8e6d6f9b899458cfa4ccfea38877

于 2013-10-06T18:57:49.057 回答
2

http://jsfiddle.net/Y7UKv/1/

更改位置类型后，它不再具有 100% 的宽度。您需要添加

left: 0;
right: 0;

或者

width:100%;
于 2013-10-06T18:56:00.310 回答