5

ウェブサイトで一緒に仕事をしているアーティストのリクエストに応じて、装飾目的で背景画像を保持するために2つのdivを追加しました。

最初は、非常にうまく機能しました。画像は、ページ幅に影響を与えることなく、Webサイトのコンテンツを保持するラッパーdivの両側に表示されるはずでした。

次に、ウェブサイトを所有している組織が別のスポンサーを獲得しました。そのスポンサーのロゴを右側の列に追加する必要がありました。5番目の「ボタン」の新しいIDを作成し、そのIDを作成しました。アップロードすると、明らかな理由もなく、ページの下部にスクロールバーが突然表示されたことがわかりました。

最初はボタンに問題があるのではないかと思いましたが、最終的には、絶対位置を使用しているにもかかわらず、右端の装飾divがページ幅を曲げていることがわかりました。両方のdivは同じコードを使用し、左右にのみミラーリングされます。何が問題を引き起こしているのかわかりません。

（www.torucon.no/no/で問題が発生している間、問題の実際を確認できます）

私を助けてください！両方のdivのCSSは次のとおりです。

#wolf
{
position:absolute;
min-height:500px;
min-width:498px;
left:-293px;
top:150px;
background-image:url('http://www.torucon.no/css/wolf.png');
z-index:-1;
}

#lion
{
position:absolute;
min-height:500px;
min-width:498px;
right:-293px;
top:150px;
background-image:url('http://www.torucon.no/css/lion.png');
z-index:-1;
}

divのHTMLを示すHTMLスニペットは次のとおりです。

<div class="wrapper"> <!-- Contains the entire website for structure --> 
<div id="wolf">
</div>
<div id="lion">
</div>

（（取得できなかった場合：ラッパーdivは中央に配置されているはずですが、ウィンドウのサイズを変更すると、ラッパーのコンテンツがブラウザーウィンドウに近づくずっと前にスクロールバーが表示されます。境界線。低解像度や小さな画面のコンピュータでは面倒です！））

4

2 に答える 2

2

ユーザーがブラウザのビューポートを広げると、ライオンとオオカミが徐々に表示されるようにしたいのですが、それ以外の場合は、ラッパーの側面に部分的に隠しておく必要があります。正しい？

スクロールバーをトリガーせずにこれを実現するための安全なオプションは、画像を1つにまとめて、ページの本文要素に背景画像として添付することだけだと思います。

ビューポートがラッパーの幅より下にサイズ変更されると、オーバーフローしたコンテンツを表示するためにスクロールする機能が失われます。

于 2012-04-21T20:02:40.243 に答える
0

リンクhttp://www.torucon.no/no/を投稿したことを確認しましたが、下のスクロールバーが表示されません、とにかく、なぜ背景を設定できないのですか？

<body>
 <div class="overlay">
     <div class="wrapper">
     </div>
 </div>
</body>


<style>
  body{width:100%; background:---;}
 .overlay{width:100%; background:---;}
<style>
于 2012-04-21T18:43:51.120 に答える