Question

如果我的浏览器窗口足够大，网页就可以了。如果它较小并向右滚动，则我的背景不会横向移动整个浏览器窗口。他们停在网页内。我已将身体背景设为蓝色，以便您可以看到背景的结束位置。我想这样做，实际内容和背景图片结束浏览器窗口结束，没有蓝色。该网站位于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>

感谢。

Answer 1

您的内容超出了.main div 如果你添加div.main { overflow: hidden; }，你会看到它按预期工作，因为没有任何东西将它推到比预期更大的宽度。

Answer 2

对于100％的高度，你需要html和body标签也是100％

将此添加到您的CSS

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

然后你必须用100％100％的包装div创建一个假背景并将你的背景置于其中以获得你想要的效果

Answer 3

为什么你有.main类？你没忘记一些元素吗？

在.header中，您将背景和宽度设置为100％。所以.header类的元素宽度将是其父元素的100％。什么是<div class="header">的父元素？

Answer 4

我看到你的宽度有很大的变化。我认为“main”“header”“block_header”都是相同的宽度。另请注意，100％不是父元素的100％，它是窗口大小的100％，尤其是当父元素大于窗口时。将宽度设置为确定的数字。如果您希望内容填充用户屏幕，则先将父级设置为100％，然后将所有子元素设置为100％以适合父元素宽度。

如何让我的html占用整个浏览器窗口？

4 个答案: