4

画面の両側に多数の「フローティング」画像を含むWebサイトを作成しています。ページの高さは約900〜3000ピクセルの範囲であるため、この領域をカバーするフローティング画像を作成しました。

問題は、ページの高さが900ピクセルしかない場合でも、ページはフローティング画像をページ上のオブジェクトとして認識し、それらへのスクロールを可能にすることです。ページが必要以上に長くなります。

StackOverflowで収集できたものから。絶対的な要素はドキュメントの流れに含まれるべきではありませんが、明らかにこれらは含まれています。また、overflow：hiddenの使用に関する回答も見ましたが、これは望ましい効果をまったくもたらしていないようです。

たぶん、javascriptを使用してページの高さに応じて画像を作成するのが唯一の方法でしょうか？

問題のサイトのWIPは次のとおりです：http：//apa.smars.se

4

2 に答える 2

3

CSSのみのソリューションが必要な場合は、次のことを行う必要があります。

  1. position:relative;要素にとmargin:0を追加し<body>ます。

  2. <body>次の要素を：の最初の要素として追加します。

    <div style="position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden;">

  3. <div class="botleft ...">and<div class="botright ...">要素をそのdivに移動します。

要素に適用position:relativeし<body>て別の要素を追加することによりposition:absolute; left:0; top:0; width:100%; height:100%、その要素に要素のサイズを「追跡」するように指示します<body>。また、追加することoverflow:hidden;で、下からオーバーフローした画像を非表示にします。

このソリューションの欠点は、ページの下部にカット画像が表示される場合があることです。まあ、完璧なものはありません:)

この変更後のDOMツリーは次のようになります。

ここに画像の説明を入力してください

結果をすぐに確認するには、ブラウザのコンソールから次のコードを実行できます。

d = document.createElement("div");
d.style.cssText = "position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden;";
document.body.insertBefore(d, document.body.firstChild);
d.appendChild(document.getElementsByClassName("botleft")[0]);
d.appendChild(document.getElementsByClassName("botright")[0]);
document.body.style.position = "relative";
document.body.style.margin = "0";
于 2013-03-24T22:08:27.870 に答える
1

要素に位置を指定すると、絶対要素を含むabsolute最初の要素に関連して絶対位置になります。relative

また、要素のデフォルトの位置は静的であるため、コンテナ要素の位置を変更する必要がある場合があります（おそらくbodyあなたの場合）。

幸運を！

于 2013-03-24T22:17:25.593 に答える