CSS跨列高度到窗口高度？ [英] CSS to span column height to window height?

问题描述

我想让左右列跨越窗口高度，并给用户一个滚动条来独立滚动这两列。我如何做到这一点？

I want to make the left and right column span to the window height and give the user a scrollbar to independently scroll the two columns. How can I do this?

我一直在尝试 min-height：100％和 height：100％ 但它似乎不工作，无论我在哪里使用它。

I've been trying min-height: 100% and height: 100% but it doesn't seem to work no matter where I use it.

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

I setup a JSFiddle here: http://jsfiddle.net/Legend/t5cUA/1/

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

EDIT: I don't want to add position: fixed. I still want the columns to align if the user reduces the width of his browser window.

推荐答案

之前的封装容器设置为 height：100％和 overflow：hidden 。像这个小提示显示（可能需要一些调整取决于你究竟想要什么）：

You need to make sure all the previous wrappers are set to height: 100% and overflow: hidden. Something like this fiddle shows (may need some tweaks depending on what exactly you want):

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

这篇关于CSS跨列高度到窗口高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！