三個垂直堆疊的DIV與滾動中間

是否有可能垂直堆疊三個DIV並只讓中間的div垂直滾動？不過，我不想使用像素高度，因爲DIV位於可調整大小的對話框內。像這樣的東西（原諒我糟糕的ASCII藝術）：三個垂直堆疊的DIV與滾動中間

+-----------+ 
| Header | 
+-----------+ 
|   ^| 
|   || 
| Scroll || 
|   || 
|   v| 
+-----------+ 
| Footer | 
+-----------+

的目標是有頁眉和頁腳的固定，並作爲對話的增長，中間的div將垂直增長。也許我只是在愚蠢，但是我在過去的幾個小時裏一直在爲此而戰，似乎無法做到。三個DIV可能需要在「另一個」DIV內，但是當我這樣做時，將高度設置爲100％，隨着中等DIV的增長，它會增長。再說一遍，這可能是我沒有考慮到的事情。我也試過用TABLE來無濟於事。

感謝您的任何幫助。

來源

2010-06-10 Dave

是[此]（http://limpid.nl/lab/css/fixed/header-and -footer）你在找什麼？ – zildjohn01 2010-06-10 02:28:58

這應該工作

<div id="header" style="position:absolute; top:0px; left:0px; height:50px;overflow:hidden;"> 
</div> 
<div id="content" style="position:absolute; top:50px; bottom:50px; left:0px; overflow:auto;"> 
</div> 
<div id="footer" style="position:absolute; bottom:0px; height:50px; left:0px; overflow:hidden;"> 
</div>

編輯 - 對於固定位置的頁眉和頁腳在模態對話框

<div id="wrapper" style="position:relative; overflow:hidden; height:100%; width:100%;"> 
    <div id="header" style="position:absolute; top:0px; left:0px; height:50px;overflow:hidden;"> 
    </div> 
    <div id="content" style="position:absolute; top:50px; bottom:50px; left:0px; overflow:auto;"> 
    </div> 
    <div id="footer" style="position:absolute; bottom:0px; height:50px; left:0px; overflow:hidden;"> 
    </div> 
</div>

來源

2010-06-10 02:29:34

關閉，除了（如在其他答案）divs絕對定位。有沒有一種方法使用「相對」定位到父元素？我想我可以開始製作全部的DIV絕對定位。 – Dave 2010-06-10 02:42:02

好，所以你有這些模態對話框，這是你的問題？正確？ – 2010-06-10 02:44:21

是的，我正在擺弄你現在發佈的內容。將嘗試編輯的版本。 – Dave 2010-06-10 02:46:50

重溫這對於2017年有了Flexbox的，但是現在可以做而不必明確定義頁眉和頁腳的高度。至少在所有瀏覽器中都有效，目前除了IE < = 10之外，其他所有瀏覽器都有顯着的市場份額，但仍有1-5％的份額，具體取決於您提出的問題。由於這通常是一種可視化/可用性機制，並且不會阻止功能，因此在這種情況下使用flexbox應該至少讓您的頁面可用於不受支持的瀏覽器的用戶。

所有你需要做的是包裹在具有明確的高度（例如，身體或100％的高度上一個孩子）一個div您的標題，內容和頁腳，與樣式：

display: flex; 
    flex: auto; 
    flex-direction: column;

而且應用該樣式的滾動窗格：

overflow-y: auto;

如果你想在滾動窗格增長因此使用所有的垂直空間：

flex-grow: 1;

和頁眉和頁腳（必要Safari和IE 10）：

flex-grow: 0;

https://jsfiddle.net/ornsk10a/

來源

2017-03-14 19:03:54

三個垂直堆疊的DIV與滾動中間

回答

相關問題