Question

我正在开发一个Web应用程序，该应用程序可视化地包含一个包含四列可变高度内容的主体上方的标题。设计之神已经将它定为固定高度，主要是因为每个列可能会变得非常长，因此（作为设计师）他们想要具有独立滚动条的iframe。

四个（潜在的）滚动条已经足够糟糕，但如果整个页面高度固定在浏览器窗口之上，那么它最终会有五个！像这样的情况下的“正常”解决方案当然是将整个页面高度固定在700像素以上，以使其具有垂直拟合的“最佳机会”，但我不想因为各种原因这样做希望很明显。

所以我的问题是：什么是最好的方法来让一个填充可用（垂直空间）的主体容器与每个列做同样的事情？它是否实用/可能？额外的问题：我可以可靠地使用CSS溢出属性的列，还是我需要讨厌的iframe？我有很多CSS经验，但几乎没有使用百分比尺寸（特别是与像素尺寸结合，因为我需要标题）。此外，这必须符合标准并向后兼容IE6。

TIA。

编辑：我本身并不是在寻找CSS布局解决方案，我的问题是如何满足每个列在主体容器内可能达到的最大高度和可滚动的需要，而无需修复主体的高度像素 - 除非我绝对需要。

Answer 1

我很确定这完全符合您的需求：Liquid 4 column layout with fixed height banner and footer

没有iframe，没有java脚本，每列自动填充可用高度。

Answer 2

你在谈论这样的事吗？

<div id="head"></div>
<div id="body">
  <div id="col1"></div>
  <div id="col2"></div>
  <div id="col3"></div>
  <div id="col4"></div>
</div>

CSS

#body { position: absolute; top: 60px /* height of the header */; bottom: 0px; width: 100%;  }
#body div { position: absolute; top:0; bottom:0 ;width: 25% }

这可能无法在IE6中使用，您必须使用JavaScript：

window.onResize = function () {
    // Calculate the height of the body, substract the height of the head and apply to all columns
}

Answer 3

在回答第二个问题时，只需在CSS中设置height属性，以确保内容永远不会超出您的要求。你可以使用overflow-y：scroll（不是有效的CSS但是有效）来强制元素上的滚动条。

Answer 4

我尝试了嵌套在彼此之间的DIV个元素的各种排列，一个设置为height:100%，另一个设置为padding:60px，我无法找到一种方法来获取内部元素有效高度100％-60px。问题是百分比高度是指包含元素的height属性，而不是高度减去边距和填充。叹息。

我必须说我希望CSS允许人们将高度表示为百分比，字体相对和像素单位的总和（或差异）（如

width: 12em - 2px;
border: 1px solid #FED; /* Total width including border is 12em exactly */

或

width: 25% - 1em;
margin: 1.25em 1em;

等，就像带有fil单元的TeX一样。）

我认为你最好的选择可能是让一些JavaScript检查横幅的高度并从视口的高度中减去它，然后适当地设置包含列的框的高度。然后，您将找出设计人员使用的大小屏幕，并在CSS文件中设置硬连线默认值以适合他们的显示。

处理多个滚动列的最佳方法

4 个答案: