1

画像の背景を持つ本文のある些細なページがありますbackground-size:cover。html { height:100% }コンテンツの量に関係なく、ページ全体を埋めるように設定しました。この時点まで、すべてが期待どおりに機能していました。

を追加しdivて設定しましたposition:absolute; right:0; width:200px;。これも、コンテンツを追加するまでは期待どおりに機能しました。

このdivが非常に多く入力されているため、コンテンツがページの高さよりも多くのスペースを占める場合、スクロールバーが表示されます。下にスクロールすると、背景画像が実際にはページ全体をカバーしていないことがわかります。

これは、私のdivがHTMLの高さの100％よりも高いという事実によるものです。

どうすればこれに対処できますか？

4

3 に答える 3

1

要素に追加できbackground-attachment:fixed;ますbody。

このアプローチの注意点は、背景がビューポートで固定され、ドキュメントと一緒にスクロールしないことです。

https://developer.mozilla.org/en-US/docs/CSS/background-attachment

于 2012-11-05T17:32:02.897 に答える
0

私がこのcodepenで行ったようにそれをしてください、そしてそれはうまくいくはずです。

更新:(いくつかのJSを使用）

より完全なソリューションについては、このcodepenを参照してください。

于 2012-11-05T17:15:49.953 に答える
0

アイテムを配置する代わりに、可能な限りposition:absolute使用floatしました。

<div>また、この内部のコンテンツ全体にラッパーを追加する<body>と、適切な書式設定に役立ち、それに応じて内容が引き伸ばさ<div>れます。タグとそのbody背景プロパティが正しく動作するようになりました!

于 2012-11-09T21:52:46.710 に答える