1

スティッキーヘッダーの基本的な例を次に示します。

#header {
    position:fixed;
    background-color: #CCE;
    width: 500px;
}
...
#content {
    background-color: #EEE;
    width: 500px;
}

ヘッダーは固定されており、その下のコンテンツはスクロールします。これに関する問題の1つは、ページをズームすると（モバイルブラウザで頻繁に行う）、右にスクロールしてもヘッダーの右側にアクセスできなくなることです。

ここで私の例をいじってください：http：//jsfiddle.net/76haM/（実際に動作するのを見るにはズームしてください）

ズームで「動作」するスティッキーヘッダーを作成するにはどうすればよいですか？

4

1 に答える 1

2

固定幅を指定したため、これは機能しません。

#header {
    width: 500px;
}

ズームにより、ヘッダーの幅が画面よりも広くなり、テキストが途切れます。

パーセンテージベースの幅がある場合、幅は画面に応じて適切にサイズ変更されるため、適切な要素を使用するとより良い結果が得られます。

#header {
    width: 100%;
}

JSFiddle。

于 2013-02-19T10:51:49.180 に答える