CSS：100％頁面高度，沒有滾動，在IE7中工作

前言：我已經閱讀了大概三十個關於IE7的高度CSS的回答，但似乎沒有人回答我非常簡單的問題。如果這是重複的，我很抱歉，但我找不到現有的答案。CSS：100％頁面高度，沒有滾動，在IE7中工作

問題：我有一個簡單的網站，左側有導航欄。在某些頁面上，頁面的內容需要向下滾動，而在其他頁面上則不需要。

我想讓它的導航背景一直延伸到頁面的底部，無論是否需要滾動，但我不想介紹如果內容不需要滾動。

到目前爲止，我已經找到了以下內容：

position: absolute; 
height: 100%;

結果中添加滾動，如果它不是已經存在，如果內容自然需要滾動背景將提前停止。

position: absolute; 
bottom: 0;

工作完全在Firefox和Chrome的權利，但不是IE7 +

我想出一個變通的顏色的HTML元素上重複背景圖像的，但是這意味着，如果我想改變顏色我必須生成一個新的圖像，這似乎很愚蠢。

來源

2012-11-14 Bing

IE7支持位置：如果指定了一些doctype，則爲fixed。

<!doctype html> 
<html> 
<head><title>title</title> 
<style type="text/css"> 
html, body{ height:100%; margin:0; padding:0; } 
.nav{ position:fixed; left:0; top:0; height:100%; background-color:#ccc; width:100px; } 
.very-high{ height:3000px; margin-left:110px; } 
</style> 
</head> 
<body> 
    <div class="nav">div class="nav"</div> 
    <div class="very-high">a div with height:3000px</div> 
</body> 
</html>

創建一個demo on jsFiddle

來源

2012-11-14 16:27:49

CSS：100％頁面高度，沒有滾動，在IE7中工作

回答

相關問題