1

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

<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/

4

1 回答 1

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

于 2012-08-28T11:25:57.213 回答