如何讓我的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佔據整個瀏覽器窗口？

回答

相關問題