最小高度vs高度

我目前正試圖讓DIV擴展到瀏覽器高度的100％。我知道這是一個常見的問題，所以爲了找到答案已經閱讀了無數次的論壇，但還沒有找到適用於所有瀏覽器的內容。最小高度vs高度

我的CSS文件看起來是這樣的：

html{height:100%;} 

body { 
background: #ffffff; 
font-size: 0.8em; 
line-height: 1.7; 
color: #09123e; 
height:100%; 
} 

#wrapper { 
background: #ffffff url(../images/assets/wrapper.bg.gif) repeat-y center center; 
margin: 0 auto; 
height:100%; 
}

這使得像預期的那樣，除了更高版本的Internet Explorer，最值得注意的是IE7和IE8的所有瀏覽器。我發現，如果我在#wrapper上使用最小高度而不是高度，那麼我會在有問題的瀏覽器中獲得所需的結果，但這會在其他任何事情中混淆渲染。我曾嘗試使用條件樣式表，但指定的#wrapper樣式似乎被忽略。

任何幫助將不勝感激。

來源

2010-11-15 James

你使用CSS重置來重置所有填充/邊距？ – 2010-11-15 17:20:51

請將其更改爲最小高度，然後將其鏈接或複製。它不會在IE6及以下版本中運行，但應該在其他地方運行。確保你有一個文檔類型。 – 2010-11-15 17:22:36

我發現這個問題唯一可靠的解決方案是使用javascript/jquery手動更改高度。也就是說，假設訪問者已啓用JavaScript。我有一個網站，它有一個彩色的側面菜單欄和一個白色的內容區域。兩個都是div，一個是浮右，另一個是左浮。內容區域幾乎總是大於側邊菜單欄，所以只要使用這個小小的jQuery代碼片段就可以製作彩色邊欄。

<script language="javascript"> 
    <!-- 
     $(document).ready(function() { 
      var p = $("#pageContent").height(); 
      var m = $("#menuContent").height(); 
      if (m < p) $("#menuContent").height(p); 
     }); 
    --> 
</script>

來源

2010-11-15 17:25:31 Dutchie432

爲什麼投票反對？這是一個可以解決OP問題的跨瀏覽器解決方案。 – Dutchie432 2010-11-15 19:36:28

這在所有瀏覽器都可以正常工作，請確保您使用的是doctype！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<style type="text/css"> 
* {margin: 0px; padding: 0px;} //Reset all margins, use some css reset stylesheet instead... 
html {height: 100%;} 
body {height: 100%;} 
#wrapper { 
margin: 0 auto; 
height: 100%; 
} 
</style> 
</head> 
<body> 
<div id="wrapper"></div> 
</body> 
</html>

來源

2010-11-15 17:25:40

最小高度vs高度

回答

相關問題