我有一个将承载导航树的框架。我想在框架的右侧有一个蓝色边框。此边框应从上到下填满整个框架区域，并且框架也应可滚动。
框架没有固定大小，它会填满整个浏览器窗口的左侧，并且会在用户调整浏览器窗口大小时改变大小。
树框(和最小上下文)定义为:
<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]-->
最佳答案
是的。正如@Zoltan Toth 所说，将样式添加到 iframe 本身......(在某些浏览器中你可能还需要 frameborder="0"属性，你会想要这样做:
更新:
在 tree.html 样式中:
body { border:0; border-right: 2px solid blue; min-height: 400px; /* change this */ }
在引用文档中:
<iframe src="tree.html" frameborder="0" style="border:0; width:400px; height:400px; "></iframe>
关于html - 在可滚动的 HTML 框架上设置边框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8139784/