html - 带有CSS渐变背景的固定底部栏

Question

我想在屏幕底部放置一个底栏。我有一段 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;

Answer 1

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

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

Fiddle