前言: 我在这里阅读了大约 3 打关于 IE7 中 100% 高度 CSS 的答案,但似乎没有一个能回答我极其简单的问题。如果这是重复的,我深表歉意,但我找不到现有的答案。
问题: 我有一个简单的网站,左侧有一个导航栏。在某些页面上,页面内容需要向下滚动,而在其他页面上则不需要。
我想使导航背景一直延伸到页面底部,无论是否需要滚动,但如果内容不需要滚动,我不想引入滚动。
到目前为止,我发现了以下内容:
position: absolute;
height: 100%;
如果滚动还不存在,并且如果内容自然需要滚动,则背景将提前停止。
position: absolute;
bottom: 0;
在 Firefox 和 Chrome 上完全正常工作,但在 IE7+ 上不正常
我想出了一个解决方法,即在颜色的 HTML 元素上重复背景图像,但这意味着如果我想更改颜色,我必须生成一个新图像,这看起来很愚蠢。
最佳答案
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
关于CSS:100% 页面高度,无滚动,适用于 IE7,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13382697/