设置最大高度以在流体宽度内容中列出答案

【问题标题】：Set max height to list in fluid width content设置最大高度以在流体宽度内容中列出
【发布时间】：2013-10-01 08:24:32
【问题描述】：

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

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

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

【问题讨论】：

标签： jquery html css height fluid-layout

【解决方案1】：

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

查看can i use 以获得box-sizing 的支持。

【讨论】：

【解决方案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/

【讨论】：

很高兴我能帮上忙。 @Willian Duarte 也提出了一些非常好的观点。我可以确认此解决方案适用于 IE8+ 和所有其他主要浏览器。（IE7 及以下版本的全球使用率不到 5% 并且已经过时，所以我不鼓励对它们的支持）。