题
我有一个 HTML 页面,垂直分为
- 标头
- 身体
- 页脚
身体又被水平分为
- 左侧有一个大 DIV,周围有滚动条,显示图表的一部分
- 右边有一个表格
页眉和页脚是固定高度的。正文应垂直扩展以填充窗口中未被页眉和页脚占据的部分。
同样,表单是固定宽度的,滚动窗格应水平扩展以填充窗口宽度。
该图非常大(最多 10x10 屏),因此我无法显示全部。相反,我想显示尽可能多的内容(使用整个窗口),以便用户需要尽可能少地滚动。
我也不能使用javascript,因为有些用户必然是偏执的并且必须禁用它。
我考虑过的一些选择:
- 滚动窗格单元格的宽度和高度设置为 100%,所有其他设置为 1% 的表格
不起作用。即使在滚动窗格 DIV 上进行绝对定位,表(以及页面)也会扩展以包含整个图表。 - 绝对定位,将窗格从页面底部偏移页脚的高度
有效但不准确:页脚的高度取决于当前字体大小以及文本是否换行。这意味着我必须留出很大的余量以确保它们不会重叠。 - 将图表放置在 IFRAME 中
我发现禁用脚本的最佳解决方案,但限制了我在脚本中可以执行的操作 是 已启用。
我注意到,当禁用脚本时,Google 地图会使用固定大小的地图区域。如果谷歌放弃了这个问题,是否意味着它不可行?
解决方案
使用高度:100% CSS 属性应该可以正常工作。
看看 Dave Woods 使用 CSS 的 100% 高度布局 为你工作。
其他提示
这是一个鲜为人知的方面 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>
s。如果字体大小是一个问题,请使用 ems。
附言。有一个问题是 IE6 搞砸了(震惊!),但是我提供的示例有一个 IE6 后备。不过,只要固定高度就可以了。
不隶属于 StackOverflow