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

【问题标题】：Best Way to Handle Multiple Scrolling Columns处理多个滚动列的最佳方法
【发布时间】：2010-09-16 19:11:18
【问题描述】：

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

四个（可能的）滚动条已经够糟糕了，但是如果整个页面高度固定为高于浏览器窗口，那么最终会变成五个！在这种情况下，“正常”解决方案当然是将整体页面高度固定在 700 像素左右，以使其具有垂直拟合的“最佳机会”，但由于各种原因，我不想这样做'希望是显而易见的。

所以我的问题是：拥有一个填充可用（垂直空间）且每个列都执行相同操作的主体容器的最佳方法是什么？它甚至实用/可能吗？额外的问题：我可以可靠地为列使用 CSS 溢出属性还是需要讨厌的 iframe？我有很多 CSS 经验，但几乎没有使用百分比尺寸（尤其是在与我需要的标题相结合的像素尺寸时）。此外，它必须符合标准并向后兼容 IE6。

TIA。

编辑：我不是在寻找 CSS 布局解决方案本身，我的问题是如何满足每列成为正文容器内可能的最大高度和可滚动的需求，而不用固定正文的高度像素 - 除非我绝对需要。

【问题讨论】：

标签： css

【解决方案1】：

我很确定这正是您所需要的：Liquid 4 column layout with fixed height banner and footer

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

【讨论】：

【解决方案2】：

我已经尝试了 DIV 元素相互嵌套的各种排列，一个设置为 height:100%，另一个设置为 padding:60px，我无法找到一种方法让内部元素具有 100% 的有效高度-60 像素。问题是百分比高度指的是包含元素的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 文件中设置硬连线默认值以适合他们的显示器。

【讨论】：

【解决方案3】：

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

【讨论】：

干杯，但是将高度设置为什么？我的第一个想法当然是 100%，但我不确定这是否会可靠地工作。我可以看到我需要做一些严肃的测试，但希望其他人已经去过那里......

【解决方案4】：

你是在说这样的事情吗？

<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
}

【讨论】：

感谢 Dimitry，确实有很多方法可以实现布局，但我关心的是固定高度和列滚动。