11

我有一个 HTML 页面垂直分为

  • 标题
  • 身体
  • 页脚

身体依次水平分成

  • 左侧的大 DIV 被滚动条包围，显示图表的一部分
  • 右边的表格

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

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

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

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

我考虑过的一些选项：

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

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

4

2 回答 2

11

使用 height: 100% CSS 属性应该可以正常工作。

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

于 2009-02-15T16:58:02.600 回答
4

这是 CSS 属性的一个鲜为人知的方面position: absolute;，它将为您提供您正在寻找的布局。您可以在所有 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 后备。不过，只要一个固定的高度就可以了。

于 2009-02-15T17:03:49.653 回答