應用溢出一個子元素，當含量太大

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

UPDATE不同的方法： 把內容在一個容器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