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

我在使用身高時發生問題。我在頁面中使用了height：100％。我爲此設置了背景顏色。它在瀏覽器最大化的情況下工作正常。但是當它調整大小時，我的div不能正確渲染。調整瀏覽器大小時，身高100％無法正常工作

我的問題是當我調整瀏覽器窗口的大小時，滾動顯示爲我的div，但背景顏色不呈現爲我的整個div。它僅在調整窗口大小時呈現給我看過的部分。

我的styleClass

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

PLZ幫我走出這個問題。

在此先感謝。

來源

2013-02-11 Arun

如果你提供你的代碼..這會讓我們更好地幫助你.. – sasi 2013-02-11 06:57:03

我沒有看到任何問題。 http://jsfiddle.net/bz8p5/ – fredsbend 2013-02-11 07:21:19

是的......它在jsfiddle.net中正常工作。但是當我在這裏有一些內部div。，在瀏覽器窗口中出現一些問題 – Arun 2013-02-11 07:28:06

我測試過這種使用本地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與背景顏色不變，所以我不能說明你爲什麼看到這一點。

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

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

將使div適合正確。

順便說一句，網站如CodePen和JSFiddle報價申請重置樣式表像Normalize和Reset的選項，你應該留意這些被預選，當你創建一個新的筆/小提琴（的jsfiddle做到這一點的正常化）。

來源

2013-02-11 14:22:14 Raad

我有這樣的問題。只有一件事幫助我。當我需要爲主體元素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; 
}

類似的事情，你可以涉及到其他因素。

來源

2013-02-11 08:21:37 AnilkaBobo

感謝Anilka爲你的答案。但-moz-background-size：cover;它是一個Firefox特定的屬性。希望它不適用於其他瀏覽器。 – Arun 2013-02-11 10:16:47

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

回答

相關問題