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

如果我的浏览器窗口足够大，网页就没问题。如果它比较小并且向右滚动，则我的背景不会横跨整个浏览器窗口。他们停在网页内。我已将身体背景设为蓝色，以便您可以看到背景的结尾。我想这样做，所以实际的内容和背景图片结束于浏览器窗口结束并且没有蓝色的地方。该网站位于avidest.com/schneer。这里是CSS：如何让我的html占据整个浏览器窗口？

.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>

感谢。

来源

2013-02-26 Philip7899

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

来源

2013-02-26 22:59:44 mavrosxristoforos

+1确认这是问题。 – 2013-02-26 23:03:10

谢谢，感谢。 – Philip7899 2013-02-27 00:00:48

没问题，我很乐意提供帮助。 – mavrosxristoforos 2013-02-27 00:02:25

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

添加到你的CSS

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

，你将不得不创建一个假背景出来的100％由100％的包装div和你的背景，以获得你要找的效果

来源

2013-02-26 22:54:16 bizzehdee

谢谢，但我不需要100％的身高。我需要的宽度是100％，但由于某种原因它不工作。 – Philip7899 2013-02-26 22:55:19

对不起，误解了问题，这是因为背景左对齐，并且应用于背景，而不是内容。你将不得不从100％100％的包装div中创建一个假背景，并将你的背景放在其中，以获得你正在寻找的效果 – bizzehdee 2013-02-26 22:57:51

谢谢。试过，但它没有奏效。 - 回应Hamza – Philip7899 2013-02-26 22:58:56

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

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

来源

2013-02-26 23:05:11 betatester07

我看到了宽度的巨大差异。我会认为“主”“标题”“block_header”都将是相同的宽度。还要注意，100％不是父元素的100％，而是100％的窗口大小，特别是当父元素大于窗口时。将宽度设置为一个确定的数字。如果您希望内容填充用户屏幕，则先将父级设置为100％，然后将所有子级元素设置为100％以适应父级元素的宽度。

来源

2013-02-26 23:06:59 Krik

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

回答

相关问题