調整瀏覽器大小時，高度100％無法正常工作

Question

我在使用height時遇到問題。 我在頁面中使用了height：100％作為div。 我為此設置了背景色。 當瀏覽器最大化時，它可以正常工作。 但是，當調整大小時，我的div無法正確呈現。

我的問題是，當我調整瀏覽器窗口的大小時，div會出現滾動，但整個div的背景色卻無法呈現。 它僅針對調整窗口大小時看到的部分進行渲染。

我的風格課

html,body{height:100%;} 
.rightDiv{  height:100%;width: 39%;background: #3F5D91;float: right;color: #F0F0F0;}

請幫助我擺脫這個問題。

提前致謝。

Answer 1

我已經使用本地html文件對此進行了測試：

<!DOCTYPE html>
<html>
  <head>
    <style>
      html,body{height:100%;} 
      .rightDiv{height:100%;width: 39%;background: #3F5D91;float: right;color: #F0F0F0;}
    </style>
  </head>
  <body>
    <div class="rightDiv">Hello</div>
  </body>
</html>

在Firefox 18.0.2 / Windows7上，我會在右側看到div（藍色），並且在全屏顯示或調整大小時會看到滾動條。

滾動顯示div的其余部分，而背景顏色保持不變，因此我無法解釋您為什么看到它。

但是，我想知道您是否真的想看到滾動條。 將元素設置為100％通常意味着您只希望它填充視口，而不是溢出。
如果是這種情況，則需要刪除瀏覽器應用於包含div的元素（例如主體）的任何默認邊距。 設置：

 html,body{margin:0; height:100%;}

將使div合適。

順便說一句，諸如CodePen和JSFiddle之類的站點提供了應用諸如Normalize和Reset之類的重置樣式表的選項，並且在創建新的筆/小提琴時（當JSFiddle為Normalize執行此操作時）您應注意這些被預先選擇。

Answer 2

我有這樣的問題。 這里只有一件事對我有幫助。 當我需要100％的身高作為身體元素時，我必須為他設置以下樣式：

body {
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  -webkit-background-size: cover; /*makes background cover whole page
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

其他元素可能涉及的類似事物。

調整瀏覽器大小時，高度100％無法正常工作

問題描述

2 個解決方案

解決方案1
1 已采納 2013-02-11 14:22:14

解決方案2
0 2013-02-11 08:21:37

調整瀏覽器大小時，高度100％無法正常工作

問題描述

2 個解決方案

解決方案1 1 已采納 2013-02-11 14:22:14

解決方案2 0 2013-02-11 08:21:37

解決方案1
1 已采納 2013-02-11 14:22:14

解決方案2
0 2013-02-11 08:21:37