0

如果我的浏览器窗口足够大，网页就可以了。如果它更小并且我向右滚动，我的背景不会水平穿过整个浏览器窗口。他们停在网页内。我已将主体背景设为蓝色，以便您可以看到背景的结束位置。我想让实际的内容和背景图片在浏览器窗口结束的地方结束并且没有蓝色。该网站位于 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 回答