我有一列包含几个不同的元素,如下所示:
<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/