1

個人の Web サイトを開発していますが、Android の Chrome で問題が発生しています。すべてのページを覆う背景画像があり、所有しているすべてのブラウザー (Chrome、Opera、Safari、Firefox)と、所有しているすべてのモバイル ブラウザー (iOS の Chrome、iOS の Safari、デフォルトの Android ブラウザーでさえも) で正常に動作します。 .

私のCSSは次のbodyとおりです。

body {
    width: 100%;
    height: 100%;
    background: url(../images/background.jpg) no-repeat center center fixed;
    background-size: cover;
}

Android 版 Chrome では、背景が利用可能なビューポート (スクロールせずに見える範囲の上) のみをカバーし、スクロールせずに見える範囲の下には表示されなくなります。

スクリーンショットは次のとおりです。

折り目の上で背景が消えるbodyより古典的なラッパーの代わりに 使用すると問題になる可能性があります#container divか? マークアップを乱雑にすることなく、これを解決したいと思っています。本当にほとんどのブラウザで動作するので、それは可能だと確信しています。

Chrome for Android のバグでしょうか。

4

2 に答える 2

1

コメントで示唆されているように、問題は に明示的に設定height: 100%されてbodyいたため、ビューポートの高さに固執していました。

その制約を取り除くことで、背景がすべてのコンテンツに拡張されるようになりました。

于 2013-08-08T16:57:06.717 に答える
0

min-height: body と html の 100% に切り替えると、同じ効果が得られます。

それ以外の場合は、jsbin.com の URL の例またはコードの例を提供していただけますか

于 2013-08-08T08:57:07.620 に答える