Question

这是流畅的，并且工作正常，但是当更多项目被添加到#commentWrapper的列表中时，它会破坏布局，因为它会“向下”推动整个事物。

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

这里有任何css / html解决方案吗？我应该转向使用javascript解决方案吗？我也在使用jquery，以防任何答案都包含javascript。

Answer 1

@Bogdan解决方案有效，因为“身高：100％;”当“位置：绝对”时起作用被设定。请注意您需要构建的布局以及您需要支持的浏览器。

查看can i use box-sizing支持。

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/

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

2 个答案: