css - 残りの高さにスクロール可能なテーブルを置く（ヘッダーとフッターの間）

Question

Attached Img.
添付の画像を参照してください。私はHeader,contentとFooterです。

HeaderとFooterの両方が修正されています。彼らはいつも目に見えるはずです。
contentの中には、<table>があります。私はこれを<table>の残りの高さをheaderとfooterの間にするようにします。

テーブルには多くのデータが含まれている可能性があるため、スクロール可能にしたいと考えています。

以下のスニペットは、どのように私はそれが自動的に残り/フルの高さを取ることができます

私はoverflow-y: auto; max-height: 200px;（固定サイズ）でdivにtableを置くことによって得た最も近いを示して？

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> 

（フレキシボックスがIE9でサポートされていないよう）あなたはこのCSSのソリューションを探していた。

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

このスニペット以下のフレキシボックスで解決：私も、私はそれがすべてのようにのような<router-outlet>の内側に包まれていたとして、問題ではありませんでしたと思った「ナビゲーションバー」を持っていたので、それを使って上のhttps://codepen.io/anthonyLukes/pen/DLBeE

以前の試みは、失敗しました私はフレキシボックスを使用してみました場合は

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

は、私のフッターは、私がした修正するためにやったので、何..コンテンツ領域が.. ..それは私が考えたものだ

を「すべての残りの領域を取った」は表示されませんでした：
1、ヘッダをラップだのdivを作成したコンテンツ、およびフッターは「上に移動」.header

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

2.ナビゲーションバーの高さとmargin-topを置く：

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

ありますおそらくこれを行うより良い、正しい方法、私はフレックスボックスの仕組みをよく理解していませんが、私が気づいたのは、flex: 1 1 auto;は "残りの高さに拡大/拡大"し、全体の高さページの親のdivの高さではありません。

したがって、ヘッダーにmargint-top: 2.5em;を追加すると、基本的にはどれだけ成長できるかを計算する際に「ナビバーの高さ」を考慮する必要があります。

これが完了したら、私は同じマージンで全体をもう一度シフトします。

ここで最終的な結果です：img