84

幅 250 ピクセル、高さ 100%のposition:fixed左の列があり、この例のように、固定された流動的な水平バーを上部に、左の列の右側に配置しようとしています。

ここに画像の説明を入力

しかし、これは私がここにいるものです:

ここに画像の説明を入力

これは私がやったことです：

JSFIDDLE

.page-wrapper, html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

.left-column {
    position:fixed;
    top:0;
    left:0;
    z-index:1000;
    width:250px;
    height:100%;
    background:#090909;
}

.top-bar {
    position:fixed;
    top:0;
    left:250px;
    width:100%;
    height:54px;
    background:#090909;
    z-index:1000;
}

この固定トップバーが画面の幅の 100% に広がるようにするにはどうすればよいですか? かなり複雑なレスポンシブ テンプレートの作成に何年も費やしたばかりで、コンテンツを追加した後、トップ バーの右側にあるものが画面から消えていることに気付いたので、これが簡単な修正であることを願っています!

私には 1 つのアイデアがありますが、最も理想的ではない可能性があるため、最初に他の提案に関心があります。左の固定列には、上部のバーよりも高い z-index 値を指定できます。上部のバーから左余白を削除しますが、代わりに上部のバーの内容に左の列の幅と同じ左余白を配置します。 . 紛らわしく聞こえますが、可能です。

4

4 に答える 4

139

最新の CSS バージョンを必要としない非常に単純なソリューションは、まったく設定widthされていません。代わりに、このフィドルright: 0で見られるように、トップバーの右の境界線が右の境界線に強制的に配置されるように設定するだけです。

.top-bar {
    position:fixed;
    top:0;
    left:250px;
    right:0;
    height:54px;
    background:#090909;
    z-index:1000;
}

ボックスの終了位置がわかりやすいように、赤い境界線を追加しました。

于 2013-08-26T11:13:05.730 に答える
7

left: 250pxと組み合わせてusepadding-left:250pxを使用する代わりにbox-sizing: border-box:

.top-bar {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:54px;
    background:#090909;
    z-index:1000;
    padding-left: 250px;
    -moz-box-sizing: border-box:
    box-sizing: border-box:
}

フィドル

于 2013-08-26T11:09:11.140 に答える
-4

これを試して

.left-column {
    float:left;
    width:150px;
    height:100px;
    background:#090909;
    color:white;
}

.top-bar {
    margin-left:150px;
    background:yellow;
    border:2px solid red;
}

http://jsfiddle.net/jGP5Y/87/

于 2014-04-30T20:35:52.510 に答える