CSS：100% 页面高度，无滚动，在 IE7 中工作答案

【问题标题】：CSS: 100% page height, no scrolling, working in IE7CSS：100% 页面高度，无滚动，在 IE7 中工作
【发布时间】：2012-11-03 04:16:03
【问题描述】：

前言：我在这里阅读了大约 3 打关于 IE7 中 100% 高度 CSS 的答案，但似乎没有一个回答我这个极其简单的问题。如果这是重复的，我很抱歉，但我找不到现有的答案。

问题：我有一个简单的网站，左侧有一个导航栏。在某些页面上，页面内容需要向下滚动，而在其他页面上则不需要。

我想让导航背景一直延伸到页面底部，无论是否需要滚动，但如果内容不需要滚动，我不想引入滚动。

到目前为止，我发现了以下内容：

position: absolute;
height: 100%;

如果不存在滚动，并且内容自然需要滚动，则会导致添加滚动，背景将提前停止。

position: absolute;
bottom: 0;

完全可以在 Firefox 和 Chrome 上运行，但不能在 IE7+ 上运行

我想出了一个在颜色的 HTML 元素上重复背景图像的解决方法，但这意味着如果我想更改颜色，我必须生成一个新图像，这看起来很愚蠢。

【问题讨论】：

标签： css internet-explorer scroll height

【解决方案1】：

如果指定了某些文档类型，IE7 支持 position: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

【讨论】：