CSS:100%页面高度,无滚动,在IE7中工作



前言:我在IE7中阅读了大约30多个关于100%高度CSS的答案,但似乎没有一个能回答我非常简单的问题。如果这是重复的,我很抱歉,但我找不到现有的答案。

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

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

到目前为止,我发现了以下内容:

position: absolute;
height: 100%;

如果不存在滚动,则添加滚动;如果内容自然需要滚动,则背景将提前停止。

position: absolute;
bottom: 0;

适用于Firefox和Chrome,但不适用于IE7+

我想了一个办法,在颜色的HTML元素上重复一个背景图像,但这意味着如果我想改变颜色,我必须生成一个新的图像,这看起来很傻。

IE7支持position:如果指定了某些doctype,则修复。

<!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>

在jsFiddle 上创建了一个演示

最新更新