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

absolute要素がまたはを使用して配置されている場合、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 に答える
3

これらの 3 つをルールに追加するだけです。固定配置には、要素の幅を指定する必要があります。これは、絶対配置の特殊な形式にすぎないためです。

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

フィドル

于 2013-10-06T18:56:55.823 に答える
2

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

ポジション タイプが変更されると、幅が 100% ではなくなります。追加する必要があります

left: 0;
right: 0;

また

width:100%;
于 2013-10-06T18:56:00.310 に答える