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

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

1 个答案: