设置可滚动 HTML 框架的边框
我有一个将承载导航树的框架。我想在框架的右侧有一个蓝色边框。该边框应从上到下填充整个框架区域，并且框架还应可滚动。
框架没有固定的大小，它将填充浏览器窗口的整个左侧，并会在用户调整浏览器窗口大小时改变大小。
树框架（和最小上下文）定义为：
<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 不支持 min-height，我们使用普通高度。这恰好适用于该浏览器（滚动时边框不会消失），但不适用于更现代的浏览器。
<!--[if lt IE 7]>
<style type="text/css">
body { height:100%; }
</style>
<![endif]-->
I have a frame that will host a navigation tree. I want to have a blue border on the right side of the frame. This border should fill the entire frame area from top to bottom and the frame should also be scrollable.
The frame has no fixed size, it will fill the entire left side of the browser window and will change size when the user resizes the browser window.
The tree frame (and a minimal context) is defined as:
<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>
In the frame content (tree.html) I define the border as:
<style type="text/css">
html {
border-right: red 2px solid;
background: yellow;
}
</style>
Now, if the tree content is large enough to fill the frame area (or larger, in which case scrollbars are automatically added) then this works well.
However, if the tree is "too small" and does not expand to fill the entire frame area, then the border will not fill the entire right side of the frame, but stop partway down.
UPDATE: This seems to be browser specific. In Firefox 8 and Opera 11 the content border is cut short, but in Chrome it fills the whole right frame border.
That can in turn be fixed forcing the tree to expand to the available area:
<style type="text/css">
html {
height: 100%;
border-right: blue 2px solid;
background:yellow;
}
</style>
But in this case when the tree is large enough to require scrolling you will notice that the border disappears when you scroll down. At least in modern browsers like IE8+, Firefox, Chrome and Opera. In IE6 the border will stay in place when scrolling for some reason.
UPDATE: This fails (i.e. border disappers when scrolling) in all of Chrome, Firefox and Opera.
Is there a simple way to make it work as I want to also in other browsers?
The background on the other hand works as expected, it will fill the entire frame area in all cases, so why not the border?
SOLUTION:
The solution finally found was to set the border on the BODY element instead of HTML as well as setting HTML element height to 100% and BODY element min-height to 100%.
Using min-height for BODY instead of height ensures that the border does not disappear when scrolling and that it does fill the entire border for "too short" contents.
<style type="text/css">
html { height:100%; }
body { min-height:100%; }
body { border-right:blue 2px solid; }
</style>
Since IE6 does not support min-height we use plain height for it. Which happens to work in that browser (border does not disappear when scrolling), but not in more modern ones.
<!--[if lt IE 7]>
<style type="text/css">
body { height:100%; }
</style>
<![endif]-->
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
是的。正如@Zoltan Toth所说，将样式添加到iframe本身...（在某些浏览器中您可能还需要frameborder =“0”属性，并且您需要这样做：
更新：
在tree.html 样式：
在参考文档中：
Yup. As @Zoltan Toth said, add the styles to the iframe itself... (you may also need a frameborder="0" attribute in some browsers, and you'll want to do:
UPDATED:
In tree.html styles:
In referencing document: