Question

我有一个将托管导航树的框架。我想在框架的右侧有一个蓝色边框。此边框应从上到下填充整个框架区域，框架也应该可滚动。

框架没有固定大小，它将填充浏览器窗口的整个左侧，并在用户调整浏览器窗口大小时更改大小。

树框架（和最小上下文）定义为：

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

现在，如果树内容足够大以填充框架区域（或更大，在这种情况下自动添加滚动条），那么这很有效。

但是，如果树“太小”并且没有展开以填充整个框架区域，则边框将不会填满框架的整个右侧，而是在中途停止。

Tree content does not will the frame

更新：这似乎是浏览器特定的。在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中，由于某种原因滚动时边框将保持不变。

Border disappers when scrolling down

更新：在Chrome，Firefox和Opera中，这都失败了（即滚动时边框消失）。

是否有一种简单的方法可以让它在我想要的其他浏览器中运行？

另一方面，背景按预期工作，它将在所有情况下填充整个框架区域，为什么不在边框？

SOLUTION：

最终找到的解决方案是在BODY元素上设置边框而不是HTML，并将HTML元素高度设置为100％，将BODY元素的最小高度设置为100％。

使用BODY的最小高度而不是高度可确保滚动时边框不会消失，并且它确实填满整个边框的“太短”内容。

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

Answer 1

烨。正如@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框架上设置边框

1 个答案: