背景画像はビューポートを越えて伸びる

全画面の背景画像が必要なページがあります。ボディがビューポート内に収まるときはこれがうまく動作しますが、html {height：100％; }とボディ{min-height：100％;パディングトップ：70ピクセル。 ...背景サイズ：カバー; }（上部のパディングはページヘッダ用です）。この問題は、ページがビューポートよりも大きくなると発生します。ボディは正しい高さに伸びますが、背景のアタッチメントはビューポートのサイズよりも大きくならません。ここではサンプルのフィドルです[https://jsfiddle.net/xdsgek6t/]。ライブバージョンではイメージオーバーレイもありますが、フィディドゥーでは放射状グラデーションが終わる線を簡単に見ることができますが、このフィドルでは子供のために3000pxの体重をカバーするように言っています素子。背景画像はビューポートを越えて伸びる

html { height: 100%; box-sizing: border-box; } 
 
body { 
 
    overflow-y: scroll; 
 
    padding-bottom: 30px; 
 
    padding-top: 70px; 
 
    background-color: #363636; 
 
    min-height: 100%; 
 
\t background-color: #1976D2; 
 
\t background-image: radial-gradient(circle at top right, #64B5F6 0%, #1976D2 90%); 
 
\t background-repeat: no-repeat; 
 
\t background-attachment: scroll; 
 
\t background-position: right 70px; 
 
\t background-size: cover; 
 
    margin: 0; 
 
    box-sizing: border-box; 
 
} 
 
div.something { height: 3000px; width: 10px; } 
 
header { position: absolute; width: 100%; top: 0; left: 0; height: 70px; z-index: 500; background-color: #ddd; }

<body> 
 
    <header></header> 
 
    <div class="something"></div> 
 
</body>

このページはほんの少し大きくなると、携帯電話上で本当に明白であるとき、本当に奇妙な終わります。

出典

2017-02-28 Adam Marr

にheight: 100%に依存しませんHTMLに背景色を追加し、身体の背景を効果的に描画されます体の背景。 HTML/BODYのbgについては面白いことです。いずれかの背景に背景を設定すると、HTMLで描画されます。したがって、違いを作るために、両方のためのルールを設定し、bg-colorとして透明を使用しないで、普通の色は問題ありません... https://jsfiddle.net/xdsgek6t/2/ –

いくつかの参照を追加してください私の前のコメント：https://www.w3.org/TR/css3-background/#root-background –

非常に興味深い、情報ありがとう！ –

height: 100%;をhtmlから削除して拡張します。あなたはbodyにmin-height: 100%が必要な場合や、あなたの代わりにmin-height: 100vhを使用することができ、それはhtml

html { box-sizing: border-box; } 
 
body { 
 
    overflow-y: scroll; 
 
    padding-bottom: 30px; 
 
    padding-top: 70px; 
 
    background-color: #363636; 
 
    min-height: 100vh; 
 
\t background-color: #1976D2; 
 
\t background-image: radial-gradient(circle at top right, #64B5F6 0%, #1976D2 90%); 
 
\t background-repeat: no-repeat; 
 
\t background-attachment: scroll; 
 
\t background-position: right 70px; 
 
\t background-size: cover; 
 
    margin: 0; 
 
    box-sizing: border-box; 
 
} 
 
div.something { height: 3000px; width: 10px; } 
 
header { position: absolute; width: 100%; top: 0; left: 0; height: 70px; z-index: 500; background-color: #ddd; }

<header></header> 
 
<div class="something"></div>

出典

2017-02-28 00:05:17

完璧、ありがとうございます。そして、それはまさに私がhtmlの100％を持っていた理由です、100vhの提案に感謝します。 –

@AdamMarr sweet、np。 –

背景画像はビューポートを越えて伸びる

答えて

関連する問題