设置最大高度以列出流体宽度内容

Question

我有以下http://jsfiddle.net/4G33W/1/

这是一种流畅的方法，并且可以正常工作，但是当在#commentWrapper中的列表中添加更多项时，它会破坏布局，因为它会将整个对象“向下”推送。

要测试复制更多的<li>test</li>项目，您会明白我的意思。 我希望输入框保持在底部（因为它是atm），并且当列表变得足够长并且到达列表时，列表应该进入“ overflow-x：auto”模式。 我不能使用固定的高度，因为它会破坏整个物体的“流动性”，或者至少我尝试的方法似乎不起作用。

这里有任何CSS / HTML解决方案吗？ 我应该使用javascript作为解决方案吗？ 我也使用jquery，以防万一任何答案都包含javascript。

Answer 1

@Bogdan解决方案之所以有效，是因为“高度：100％；” 当“位置：绝对”时有效 被设置。 当心您需要构建的布局以及需要支持的浏览器。

并查看我是否可以使用 大小调整支持。

Answer 2

在这种情况下，可以使用纯CSS完成。 将这些规则应用于#commentWrapper元素将达到目的：

#commentWrapper {
    width: 17%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    box-sizing: border-box;
    padding-bottom: 20px;
    overflow-y: auto;
}

在这里工作jsfiddle： http : //jsfiddle.net/4G33W/2/