css - 在剩餘高度（頁眉和頁腳之間）放置可滾動表格

Question

Attached Img.
請參閱附加圖片。我有一個Header,content和Footer。

Header和Footer都是固定的。它們應始終可見。
而在content裏面，我有一個<table>。我想讓這<table>採取header和footer之間的所有剩餘高度。

該表可能包含大量數據，所以我想讓它也可以滾動。

下面的片段展示了我通過將table到最接近的一個div與overflow-y: auto; max-height: 200px;（固定大小）

我怎樣才能讓它自動取足/剩餘高度？

body { 
 
    background: green; 
 
    padding: 10px; 
 
} 
 

 
.header { 
 
    background: lightblue; 
 
} 
 

 
.content { 
 
    background: lime; 
 
    overflow-y: auto; 
 
    max-height: 200px; 
 
} 
 

 
.footer { 
 
    background: orange; 
 
}

<div class="header"> 
 
    Some awesome title 
 
</div> 
 
<div class="content"> 
 
    <table> 
 
    <thead> 
 
     <tr> 
 
     <th>Lorem.</th> 
 
     <th>Numquam.</th> 
 
     <th>Id.</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Eos.</td> 
 
     <td>Vel.</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Quod.</td> 
 
     <td>Quaerat?</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Explicabo!</td> 
 
     <td>Esse.</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Quo.</td> 
 
     <td>Praesentium!</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Perferendis!</td> 
 
     <td>Necessitatibus.</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Facere.</td> 
 
     <td>Ex.</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Ducimus.</td> 
 
     <td>Architecto.</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Porro!</td> 
 
     <td>Voluptatum.</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Culpa?</td> 
 
     <td>Dignissimos?</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Alias.</td> 
 
     <td>Deserunt!</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Mollitia!</td> 
 
     <td>Doloribus?</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Quia.</td> 
 
     <td>Aspernatur.</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Est!</td> 
 
     <td>Nihil.</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Neque.</td> 
 
     <td>Asperiores!</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Cupiditate.</td> 
 
     <td>Rerum.</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Eligendi.</td> 
 
     <td>Qui?</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Libero.</td> 
 
     <td>Molestiae!</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Suscipit.</td> 
 
     <td>Nostrum.</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Minima.</td> 
 
     <td>Voluptatem.</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Quam.</td> 
 
     <td>Mollitia.</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Minus!</td> 
 
     <td>Corporis.</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Perferendis.</td> 
 
     <td>Deleniti.</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Asperiores!</td> 
 
     <td>Rem.</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Molestiae.</td> 
 
     <td>Dignissimos?</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Doloribus.</td> 
 
     <td>Ipsam.</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Aperiam.</td> 
 
     <td>Obcaecati.</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Suscipit.</td> 
 
     <td>Harum?</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Cupiditate.</td> 
 
     <td>Tenetur.</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Ea!</td> 
 
     <td>Ipsam.</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Officia!</td> 
 
     <td>Velit.</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Mollitia!</td> 
 
     <td>Voluptatibus.</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Rerum.</td> 
 
     <td>Accusamus?</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Distinctio.</td> 
 
     <td>Ducimus.</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Iure.</td> 
 
     <td>Recusandae.</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Quibusdam.</td> 
 
     <td>Veritatis.</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Optio!</td> 
 
     <td>Voluptatum.</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>At.</td> 
 
     <td>Facere.</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Illum?</td> 
 
     <td>Placeat!</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Unde?</td> 
 
     <td>Explicabo.</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Reiciendis.</td> 
 
     <td>Architecto.</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Quasi?</td> 
 
     <td>Praesentium!</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Odit!</td> 
 
     <td>Ratione.</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Expedita?</td> 
 
     <td>Incidunt!</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Nemo.</td> 
 
     <td>Reprehenderit?</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Blanditiis.</td> 
 
     <td>A.</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Iusto.</td> 
 
     <td>Similique.</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Sint?</td> 
 
     <td>Corrupti.</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Consequatur.</td> 
 
     <td>Nihil!</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Magni.</td> 
 
     <td>Deleniti.</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lorem.</td> 
 
     <td>Nobis!</td> 
 
     <td>Eius.</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div> 
 
<div class="footer"> 
 
    Pagination stuff 
 
</div>

Answer 1

假設你有這樣的HTML：

<div class="header"></div> 
<div class="content">table</div> 
<div class="footer"></div> 

您正在尋找這樣的CSS（如在Flexbox的不IE9支持）：

body {margin: 0;} 
.header {height: 50px;} 
.content {height: calc(100vh - 100px); overflow-y: scroll;} 
.footer {height: 50px;} 

但我會用/喜歡這一個：

body {margin: 0;} 
.header {height: 50px; position: fixed; top: 0;} 
.content {padding: 50px 0;} 
.footer {height: 50px; position: fixed; bottom: 0;} 

後者使用正常頁面滾動而不是div溢出，這會導致較少的交叉瀏覽器問題和較好的移動性能。

Answer 2

你需要使用jQuery發現屏幕顯示高度，並用它來設置表格的高度。滾動將自動發生。

Answer 3

解決了以下這個片段Flexbox的：使用它失敗https://codepen.io/anthonyLukes/pen/DLBeE

之前的嘗試，因爲我也有一個「導航欄」，我認爲並不重要，因爲它是所有包裹<router-outlet>像這樣裏面：

<div class="container"> 
    <app-sidebar></app-sidebar> 
    <div class="main"> 
    <app-navbar></app-navbar> 
    <router-outlet></router-outlet> 
    </div> 
</div> 

當我試圖使用Flexbox的，我的頁腳是不可見的..內容面積「採取一切其餘地區」 ..這就是我以爲，

所以我做了什麼來解決了：
1.把margin-top與導航欄的高度上.header

.header { 
    flex: 0 0 auto; 
    margin-top: 2.5em; 
} 

2.製作一部包裹頭部，內容股利和頁腳「動起來」：

.page { 
    display: flex; 
    flex-flow: column; 
    margin-top: -2.5em; 
} 

有可能是一個更好，更正確的方法，我沒有很好地理解flexbox的工作原理。但是，我注意到，flex: 1 1 auto;將「增長/擴展到剩餘高度」，整個高度頁面，而不是其父部分的高度。

因此，在頭文件中添加一個margint-top: 2.5em;，基本上迫使它在計算可以增長多少時考慮到「導航欄的高度」。

一旦完成，我將整個事情再次以相同的餘量轉移。

這裏的最終結果是：img