HTML table の高さをブラウザの大きさに合わせて自動で調整したい

前提・実現したいこと

・ブラウザの大きさが変わっても、上下の h5 は常に表示し、
table は画面に収まらない場合はスクロールバー付きで表示、
収まる場合はスクロールバー無しで表示。
・できればJavaScriptは使わず、実現したいです。

該当のソースコード

html
1<h5>Titile</h5>
2
3<table border="1">
4  <tr><th>A</th></tr>
5  
6  <!--これが大量-->
7  <tr><td>1</td></tr>
8  <tr><td>1</td></tr>
9  <tr><td>1</td></tr>    
10</table>
11
12<h5>Footer</h5>
13

試したこと

html
1<div style="height:10vh;">
2  <h5>Titile</h5>
3</div>
4
5<div style="height:80vh; width:200px; overflow-y:auto;">
6  <table border="1">
7    <tr><th>A</th></tr>
8
9    <!--これが大量-->
10    <tr><td>1</td></tr>
11    <tr><td>1</td></tr>
12    <tr><td>1</td></tr>
13  </table>
14</div>
15<div style="height:10vh;">
16  <h5>Footer</h5>
17</div>

発生している問題・エラーメッセージ

上記のようにdivで囲んで vh指定する方法だと
tableだけでなく、全体的にもスクロールバーが表示され、
ブラウザの大きさによってはfooterが表示されません。
また、小さくするとTitleとtableが重なってしまいます。

こういう場合はどうするのか分からず質問させていただきました。

m.ts10806

2020/04/12 02:30

>上下の h5 は常に表示しどこにでしょうか。＞できればJavaScriptは使わず HTMLの追加や調整は発生してもかまわないのでしょうか。あと、そもそもこの内容では質問ではなく作業依頼になっているので、自身が調べたこと試したことを記載し、起きている問題を明記してください。

kkkkk12

2020/04/12 03:26

情報不足でした。すみません。追記しました。 HTMLの追加や調整は発生してもかまわないのでしょうか。 -> 自分にWEB関係の知識がなく、質問に沿った回答になっているかわからないのですが、 tableサイズ = ブラウザサイズ - 上下H5の要素というのを計算して設定するのではなく、htmlやcssの枠組み？で実現したいです。

行動規範の内容に同意します

回答1件

ベストアンサー

以下のような形でいかがでしょうか?

HTML
1<body>
2  <div style="height:10vh;">
3    <h5>Titile</h5>
4  </div>
5
6  <div class="table-container">
7    <table border="1">
8      <tr><th>A</th></tr>
9
10      <!--これが大量-->
11      <tr><td>1</td></tr>
12      <tr><td>1</td></tr>
13      <tr><td>1</td></tr>
14    </table>
15  </div>
16
17  <div style="height:10vh;">
18    <h5>Footer</h5>
19  </div>
20</body>

CSS
1* {
2  margin: 0;
3  padding: 0;
4}
5body {
6  display: flex;
7  flex-direction: column;
8  max-height: 100vh;
9}
10.table-container {
11  height: 80vh;
12  width: 200px;
13  overflow-y: auto;
14  flex: 1 1 80vh;
15}