Question

我想让左右列跨度达到窗口高度，并为用户提供滚动条以独立滚动两列。我怎样才能做到这一点？

我一直在尝试min-height: 100%和height: 100%，但无论我在哪里使用它都似乎无效。

我在这里设置了一个JSFiddle：http://jsfiddle.net/Legend/t5cUA/1/

编辑：我不想添加position: fixed。如果用户缩小浏览器窗口的宽度，我仍然希望列对齐。

Answer 1

您要独立滚动左右列的内容，您必须添加

overflow: auto;

它的CSS。另请注意，100％高度可以设置为相对或绝对块的子项，或者设置为具有定义高度的块的子项。

Answer 2

您需要确保所有以前的包装器都设置为height: 100%和overflow: hidden。像this fiddle shows之类的东西（可能需要一些调整，具体取决于你想要的东西）：

html, body, .container-fluid, .container-fluid > .row-fluid {
    height: 100%;
    overflow: hidden;
}

.span-fixed-sidebar {
    height: 100%;
    overflow: auto;
}

从澄清

更新

您只需要更深入地继续这个过程。关键是您需要在要滚动的实际列元素上设置滚动，并将其他所有内容显式设置为包含该列的height: 100%和overflow: hidden。 Probably this for you：

html, body, .container-fluid, .container-fluid > .row-fluid, .span-fixed-sidebar {
    height: 100%;
    overflow: hidden;
}

.span-fixed-sidebar > div {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

Answer 3

我不确定我是否理解这个问题，但是如果你希望跨越窗口高度并在列高于窗口时放置滚动：

.column {
  overflow: auto /* scroll */;
  height: 100%;
}

编辑：是的，如果您不希望在列不够高的情况下显示滚动，overflow: auto将是更好的选择。

CSS跨越列高到窗口高度？

3 个答案:

从澄清