jquery - 当内容太大时，将溢出应用到单个子元素

Question

我有一列包含几个不同的元素，如下所示:

<div id="column">
    <h2>Title - can be any length</h2>
    <p id="content">Lorem ipsum, yadda yadda yadda...</p>
    <button>There might be a button here.</button>
    <p>Another paragraph.</p>
    <button>A button here.</button>
</div>

我使用的是流动布局，具体取决于窗口大小，并且如上所述，元素将具有不同数量的内容和/或可能存在也可能不存在。

我希望能够设置元素的样式，以便它们都按顺序依次位于顶部(很简单，很明显)...除了，在一个案例中合并后的内容比容器高。在这种情况下，我想要 <h2>保持在顶部，从第一个开始的一切<button>所有人都坐在底部，用 <p id="content">用滚动条填充剩余高度。

纯 CSS 解决方案会很棒，但无论如何我在整个站点中都使用 jQuery，所以无论如何都可以完成工作。我敢肯定这很简单，但我一辈子都弄不明白。

jsfiddle - http://jsfiddle.net/C4hzp/

Answer 1

更新不同的方法: 将内容放入带有 max-heigth 的容器中，这样它可以是任何高度，直到达到最大高度:然后滚动条将出现。

<div id="column">
    <h2>Title - can be any length</h2>

    <p class="content">       <!-- Scrollbar starts here -->
        Lorem ipsum, yadda yadda yadda...
    </p>                      <!-- Scrollbar ends here -->

    <button>There might be a button here.</button>

    <p class="content">      <!-- Scrollbar starts here -->
        Another paragraph.
    </p>                     <!-- Scrollbar ends here -->

    <button>A button here.</button>
    <!-- Etc. -->
</div>

CSS:

p.content {
    max-height: 100px;
    overflow:auto;
}

工作 JSfiddle