スクロールさせない範囲で限界まで表示したい

Question

#動的にテーブルの高さを変更したい

上の30%程度は別の内容を表示して、下の70%をDBから引っ張ったテーブルを表示させたいのですが、
4行でも10行でもスクロールしない範囲で、高さをいっぱいにつかって表示したい。

##試したこと
CSS body max-height:1080px;　table:70%;程度に指定。
確かにスクロールバーは表示されませんが、テーブルが少し下にはみ出ています。

イメージはこんな感じです。

max-heightを1080pxで固定して、上の部分をheight;30%;残りを70%;にすれば動的にテーブルが表示されるようになるのでしょうか？ご教授願います。

Comments

[s8_chu]

現在の HTML, CSS を質問文へ追記していただけませんか？

[m.ts10806]

>～すれば動的にテーブルが表示されるようになるのでしょうか？

ご自身でやってみればわかるのではと。コード見ただけで全て確証できる人っていないですよ。必ず動作確認した上で回答します。
なので、現在の現象確認、および調整のできるコードが必要です

Answer 1

もしかして、こういうことでしょうか？
サンプル

*{
  box-sizing: content-box;
  margin: 0;
}
html,body{
  height: 100vh;
}
h1{
  height: 30vh;
}
table{
  border-collapse: collapse;
}
div{
  height: 70vh;
  overflow-y: hidden;
}
td{
  border:1px solid;
}

<h1>
上の30%程度は別の内容
</h1>
<div>
<table>
<tr><td>0</td></tr>
<tr><td>0</td></tr>
<tr><td>0</td></tr>
<tr><td>0</td></tr>
<tr><td>0</td></tr>
<tr><td>0</td></tr>
<tr><td>0</td></tr>
<tr><td>0</td></tr>
<tr><td>0</td></tr>
<tr><td>0</td></tr>
<tr><td>0</td></tr>
<tr><td>0</td></tr>
<tr><td>0</td></tr>
<tr><td>0</td></tr>
<tr><td>0</td></tr>
<tr><td>0</td></tr>
<tr><td>0</td></tr>
<tr><td>0</td></tr>
<tr><td>0</td></tr>
<tr><td>0</td></tr>
<tr><td>0</td></tr>
<tr><td>0</td></tr>
<tr><td>0</td></tr>
<tr><td>0</td></tr>
<tr><td>0</td></tr>
</table>
</div>