Question

我将HTML页面垂直划分为

标题
体
页脚

反过来，身体被水平分割成

左侧的大型DIV，由滚动条围绕，显示图表的一部分
右侧的表格

页眉和页脚是固定高度的。主体应垂直扩展，以填充未被页眉和页脚占据的窗口部分。

同样，表单是固定宽度的，滚动窗格应该水平扩展以填充窗口宽度。

图表非常大（最多10x10个屏幕），所以我无法显示所有图表。相反，我希望尽可能多地显示（使用整个窗口），以便用户需要尽可能少地滚动。

我也不能使用javascript，因为有些用户必然是偏执狂，必须禁用它。

我考虑过的一些选项：

滚动窗格单元格的宽度和高度设置为100％，其他所有其他设置为1％的表格
不起作用。即使在滚动窗格DIV上进行绝对定位，表格（以及页面）也会展开以包含整个图表。
通过页脚高度将窗格从页面底部偏移的绝对定位工作但不准确：页脚的高度取决于当前字体大小以及文本是否被包装。这意味着我必须留出很大的余量，以确保它们不重叠。
将图表放在IFRAME中我发现脚本已禁用的最佳解决方案，但限制了在启用时脚本中可以执行的操作。

我注意到，当禁用脚本时，Google地图会为地图使用固定大小的区域。如果谷歌放弃了这个问题那是否意味着它不可行？

Answer 1

使用高度：100％CSS属性应该可以使用。

查看Dave Woods 100% Height Layout Using CSS是否适合您。

Answer 2

这是position: absolute; CSS属性的一个鲜为人知的方面，它将为您提供所需的布局。您可以绝对地在所有4个方向（顶部，右侧，底部和左侧）中定位元素。这意味着一个盒子可以像浏览器一样流畅，并且始终与您指定的容器边缘保持相同的距离。

div {
    position: absolute;
}
#main {
    top: 8em; // 8em
    left: 0; 
    bottom: 8em; // 8em
    right: 300px;
    overflow: auto;
}
#header {
    top: 0;
    left: 0;
    right: 0;
    height: 8em;
}
#sidebar {
    top: 8em;
    right: 0;
    bottom: 8em;
    width: 300px;
    overflow: auto;
}
#footer {
    bottom: 0;
    left: 0;
    right: 0;
    height: 8em;
}

有关示例，请查看http://www.sanchothefat.com/dev/layouts/cssframes.html，然后查看源代码并拆分CSS，看看它是如何在更复杂的示例中完成的。

如果采用这种方法，则必须绝对定位所有主容器<div>。如果担心字体大小，请使用ems。

PS。有一个问题，IE6搞砸了（震惊！）但是我提供的例子有一个IE6后备。虽然固定的高度很好。

扩展HTML内容以填充窗口

2 个答案: