0

ブラウザ ウィンドウが十分に大きい場合、Web ページは問題ありません。それより小さく、右にスクロールすると、ブラウザ ウィンドウ全体で背景が水平方向に移動しません。それらは Web ページ内で停止します。背景がどこで終わっているかわかるように、ボディの背景を青色にしました。実際のコンテンツと背景画像がブラウザ ウィンドウの終了位置で終了し、青がないようにしたいと考えています。サイトは avidest.com/schneer にあります。CSSは次のとおりです。

.main {width:100%; padding:0; margin:0 auto; min-width: 1020px;}
.header { background:url(images/slider_bgpng200.png); background-repeat: repeat-x; padding:0; margin:0 auto; width: 100%; }
.header .headertop{width: 100%; background: #d3e5e8; height: 30px;}
.block_header {margin:0 auto; width:1200px; padding:0; border:none; }
.slider { background: transparent; margin:0 auto; padding:0; height:420px;}  
.slider .gallery { margin:0 auto; width:980px; height:420px; padding:0;}

そして、ここにhtmlがあります：

<div class="header">
   <div class="headertop"> 
       <div class="header_text"><a href="#">Email</a> | <a href="#">Client Login</a> </div>
   </div>
   <div class="block_header">
       <div class="slider">
          <div class="gallery">
          </div>
      </div>
   </div>
</div>

ありがとう。

4

4 に答える 4

4

.maindivを超えるコンテンツがあります。
を追加するとdiv.main { overflow: hidden; }、期待どおりに機能することがわかります。これは、予想よりも大きな幅にプッシュするものがないためです。

于 2013-02-26T22:59:44.783 に答える
1

高さを 100% にするには、html タグと body タグも 100% にする必要があります

これをCSSに追加します

html, body { height: 100%; width: 100%; }

次に、100% x 100% のラッパー div から偽の背景を作成し、その中に背景を配置して、探している効果を得る必要があります。

于 2013-02-26T22:54:16.743 に答える
0

なぜ.mainクラスがあるのですか？いくつかの要素を忘れませんでしたか？

.headerで、背景と幅を100％に設定します。したがって、.headerクラスを持つ要素の幅は、その親要素の100％になります。の親要素は<div class="header">何ですか？

于 2013-02-26T23:05:11.687 に答える
0

あなたの幅には大きなばらつきがあります。「main」「header」「block_header」はすべて同じ幅になると思います。また、100% は親要素の 100% ではなく、特に親要素がウィンドウよりも大きい場合、ウィンドウ サイズの 100% であることに注意してください。幅を明確な数値に設定します。コンテンツをユーザーの画面いっぱいに表示する場合は、最初に親要素を 100% に設定してから、親要素の幅に合わせてすべての子要素を 100% に設定できます。

于 2013-02-26T23:06:59.857 に答える