使HTML内容展开以填充窗口
使HTML内容展开以填充窗口
提问于 2009-02-15 16:42:24
我有一个HTML页面垂直划分为
- 标题
- 正文
- 页脚
身体又被水平地分成两部分。
- 左边的一个大的DIV，被滚动条包围，显示图表的一部分
- 右边的表格
页眉和页脚是固定高度.主体应垂直展开，以填充未被页眉和页脚占用的窗口部分。
类似地，窗体是固定宽度的，滚动窗格应水平展开以填充窗口宽度。
这个图表非常大(最多10x10个屏幕)，所以我不能全部显示。相反，我希望尽可能多地显示(使用整个窗口)，这样用户就需要尽可能少地滚动。
我也不能使用javascript，因为一些用户必然是偏执的，必须禁用它。
我曾考虑过的一些方案：
- 将滚动窗格单元格的宽度和高度设置为100%，其他所有设置为1%的表 不起作用。表(因此是页面)展开以包含整个关系图，即使在滚动窗格DIV上具有绝对定位。
- 按页脚的高度从页面底部偏移窗格的绝对位置。 工作但不准确:页脚的高度取决于当前的字体大小和文本是否包装。这意味着我必须留出很大的差额，以确保它们不重叠。
- 将图表放在IFRAME中 我找到的最好的解决方案是禁用脚本，但是当脚本启用时，限制了在脚本中所能做的事情。
我注意到，当脚本被禁用时，Google使用一个固定大小的区域作为地图。如果谷歌放弃了这个问题，这是否意味着它是不可行的？
回答 2
Stack Overflow用户
回答已采纳
发布于 2009-02-15 16:58:02
使用高度: 100% CSS属性应使其工作。
看看使用CSS的戴夫伍兹100%高度布局是否适合你。
Stack Overflow用户
发布于 2009-02-15 17:03:49
它是position: absolute; CSS属性的一个鲜为人知的方面，它将为您提供您正在寻找的布局。你绝对可以将一个元素放置在所有四个方向，上、右、下和左。这意味着一个框可以和浏览器一样流畅，并且始终保持与您指定的容器边缘相同的距离。
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. 。**
PS。IE6搞砸了(太震惊了！)但是，我提供的示例有一个IE6回退。不过只要一个固定的高度就行了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/551180
复制相关文章
相似问题
腾讯云开发者
