使HTML内容扩展以填充窗口 [英] Making HTML content expand to fill the window

问题描述

我有一个HTML页面垂直分成

I have an HTML page divided vertically into

• 标题


• 正文


• 页脚

身体反过来被水平划分为

The body in turn is divided horizontally into

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


• 右侧的表单

页眉和页脚是固定高度的。

The header and footer are fixed-height. The body should expand vertically to fill the portion of the window not occupied by the header and footer.

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

Similarly the form is fixed-width and the scroll pane should expand horizontally to fill the window width.

图表非常大（最多10x10屏幕），所以我不能显示所有。

The diagram is very large (up to 10x10 screenfuls) so I cannot display all of it. Instead I want to display as much as possible (using the whole window) so that the user needs to scroll as little as possible.

我也不能使用javascript，因为一些

I also cannot use javascript, because some users are necessarily paranoid and must disable it.

我考虑过的一些选项：

• 一个表，滚动窗格单元格的宽度和高度设置为100％，所有其他设置为1％
  
  不起作用。


• 绝对定位可以将窗格从底部偏移到底部页面的页脚高度
  工作但不准确：页脚的高度取决于当前的字体大小和文本是否被包装。


• 将图表放在IFRAME中
  我找到的最佳解决方案

• A table with the scroll pane cell's width and height set to 100% and all others to 1%
  Doesn't work. The table (and hence the page) expands to contain the entire diagram, even with absolute positioning on the scroll pane DIV.
• Absolute positioning to offset the pane from the bottom of the page by the height of the footer
  Works but inaccurate: the footer's height depends on the current font size and whether text is wrapped. This means I must leave a large margin to ensure they do not overlap.
• Place the diagram in an IFRAME
  The best solution I've found with scripts disabled, but limits what I can do in scripts when they are enabled.

我注意到，在禁用脚本时，Google地图会为地图使用固定大小的区域。

I notice that Google Maps uses a fixed-size area for the map when scripts are disabled. If Google has given up on this problem does that mean it's not feasible?

推荐答案

使用height：100％CSS属性应该使得

Using the height: 100% CSS attribute should make it work.

查看 Dave Woods 100％高度布局使用CSS 适用于您。

这篇关于使HTML内容扩展以填充窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！