【发布时间】：2011-11-15 16:36:40
【问题描述】：
我有一个框架来承载导航树。我想在框架的右侧有一个蓝色边框。这个边框应该从上到下填满整个框架区域，并且框架也应该是可滚动的。
框架没有固定大小，它会填满浏览器窗口的整个左侧，并在用户调整浏览器窗口大小时改变大小。
树框架（和最小上下文）定义为：
<html>
<head><title></title></head>
<frameset cols="250,*" frameborder="0" framespacing="0" >
<frame src="tree.html" scrolling="auto" />
<frame src="about:blank" name="navTarget" scrolling="auto" />
</frameset>
</html>
在框架内容（tree.html）中，我将边框定义为：
<style type="text/css">
html {
border-right: red 2px solid;
background: yellow;
}
</style>
现在，如果树内容足够大以填充框架区域（或更大，在这种情况下会自动添加滚动条），那么这会很好。
但是，如果树“太小”并且没有扩展以填满整个框架区域，那么边框将不会填满框架的整个右侧，而是在中途停止。
更新：这似乎是特定于浏览器的。在 Firefox 8 和 Opera 11 中，内容边框被剪短了，但在 Chrome 中，它填充了整个右边框。
这可以反过来强制树扩展到可用区域：
<style type="text/css">
html {
height: 100%;
border-right: blue 2px solid;
background:yellow;
}
</style>
但是在这种情况下，当树大到需要滚动时，您会注意到向下滚动时边框会消失。至少在 IE8+、Firefox、Chrome 和 Opera 等现代浏览器中是这样。在 IE6 中，由于某种原因，滚动时边框将保持原位。
更新：这在所有 Chrome、Firefox 和 Opera 中都会失败（即滚动时边框消失）。
有没有一种简单的方法可以让它在其他浏览器中也能像我想的那样工作？
另一方面，背景按预期工作，它在所有情况下都会填满整个框架区域，那么为什么不是边框呢？
解决方案：
最终找到的解决方案是在 BODY 元素而不是 HTML 上设置边框，并将 HTML 元素高度设置为 100%，将 BODY 元素最小高度设置为 100%。
对 BODY 使用 min-height 而不是 height 可确保边框在滚动时不会消失，并且会填充“太短”内容的整个边框。
<style type="text/css">
html { height:100%; }
body { min-height:100%; }
body { border-right:blue 2px solid; }
</style>
由于 IE6 不支持最小高度，我们使用普通高度。恰好在该浏览器中起作用（滚动时边框不会消失），但在更现代的浏览器中不起作用。
<!--[if lt IE 7]>
<style type="text/css">
body { height:100%; }
</style>
<![endif]-->
【问题讨论】：
-
您不能将
border样式添加到内部html 页面而是iframe 吗？ -
"但是在这种情况下，当树足够大以至于需要滚动时，您会注意到向下滚动时边框会消失" --> 我只是认为滚动条与您的右边框重叠。但是这个说法让我很困惑。边框只有在向下滚动时才会消失？
-
"只有在向下滚动时边框才会消失" 是的，在您开始滚动之前，它会填充框架内容的整个右侧，但是当您向下滚动时，下方的内容部分会变得可见由于某种原因没有边界。我猜这是因为边框是从“高度：100%”创建的，这将是托管框架的大小。所以只针对内容的可见区域，而不是整个可滚动区域。
标签： html css scroll border frames