使 HTML 内容扩展以填充窗口

Making HTML content expand to fill the window

提问by finnw

I have an HTML page divided vertically into

我有一个 HTML 页面垂直分为

• Header
• Body
• Footer

• 标题
• 身体
• 页脚

The body in turn is divided horizontally into

身体依次被横向分成

• A large DIV on the left surrounded by scrollbars, displaying a portion of a diagram
• A form on the right

• 左侧的大 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.

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

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.

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

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

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

Some options I have considered:

我考虑过的一些选择：

• 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 areenabled.

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

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?

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

回答by Michael Glenn

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

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

See if Dave Woods 100% Height Layout Using CSSworks for you.

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

回答by roborourke

It's a little known aspect of the position: absolute;CSS property that will give you the layout you are looking for. You can absolutely position an element in ALL 4 directions, top, right, bottom and left. This means a box can be as fluid as the browser and always remain the same distance away from the edges of it's container that you specify.

这是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;
}

For an example check out http://www.sanchothefat.com/dev/layouts/cssframes.htmland then view source and pull apart the CSS to see how it's done in a more complex example.

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

If you take this approach you have to absolutely position ALL the main container <div>s. Use ems if font-size is a concern.

如果您采用这种方法，您必须绝对定位所有主容器<div>。如果字体大小是一个问题，请使用 ems。

PS. There is a gotcha in that IE6 messes up (shock!) however the example I have provided has an IE6 fallback. Just a fixed height will be fine though.

附注。有一个问题，即 IE6 搞砸了（震惊！）但是我提供的示例有一个 IE6 回退。不过，只要固定高度就可以了。