javascript - CSS跨越列高到窗口高度？

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%and overflow: hidden。像这样的小提琴节目（可能需要一些调整，具体取决于你想要什么）：

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

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

澄清更新

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

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如果您不想在列不够高的情况下显示滚动条，这将是一个更好的选择。