0

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

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

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

这里有任何 css/html 解决方案吗？我应该求助于 javascript 来解决问题吗？我也在使用 jquery，以防万一任何答案都包含 javascript。

4

2 回答 2

2

@Bogdan 解决方案之所以有效，是因为“高度：100%；” 在“位置：绝对；”时工作 被设置。注意你需要构建的布局和你需要支持的浏览器。

看看我可以使用盒子尺寸支持吗？

于 2013-09-25T17:26:19.847 回答
1

在这种情况下，可以使用纯 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/

于 2013-09-25T16:32:16.730 回答