よくhtmlとbodyにheight:100%;つけて、中のボックスにmin-height:100%;をつければ～的なのがあるんですが
height:100%;ボックスの上下に別の高さを持つ要素があれば、その分の高さ＋ページの高さになってしまいます…(´・ω・｀)
height:100%;は親要素の高さをそのまま持つという意味ですから当たり前なのですがどちらかと言うと
「（途中から始まったとしても）画面下まで一杯の高さを持ちたい」という要望が多いと思うのです。
これをする場合はまず親要素（bodyとかのページそのものの高さを持つもの）にposition:absolute;
途中に囲むdivなどにはheight:100%;だけを指定して、下まで伸ばすボックス要素にposition:absolute;を追加、
座標起点がページ左上になるのでボックスの上にある要素の高さXXを合計してborder-top:XX solid #fff;box-sizing:border-box;height:100%;
で、下まで伸ばすためにbottom:0;を利用する
でごり押してるんですがもっといい方法ありませんかね？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ハイト１００％</title>
<style type="text/css">
html{height: 100%;}
body{height: 100%;margin: 0;position: absolute;}
#main{height: 100%;width: 800px;position: absolute;}
#main>#tab {height: 100%;box-sizing: border-box;border-top: 70px #fff solid;}
header{margin: 10px;height: 50px;position: absolute;}
.tabradio{display: none;}
#contents{width: 800px;display: table;height:100%;}
#sono1lbl{background: #ffbf7f;}
#sono1_cont{border-color: #ffbf7f;}
#sono2lbl{background: #ffff7f;}
#sono2_cont{border-color: #ffff7f;}
#sono3lbl{background: #7fff7f;}
#sono3_cont{border-color: #7fff7f;}
#sono4lbl{background: #7fbfff;}
#sono4_cont{border-color: #7fbfff;}
#sono5lbl{background: #ff7fff;}
#sono5_cont{border-color: #ff7fff;}
.tabpage{display: none;position:absolute;top: 150px;left:0;bottom: 0;right: 0;width: 120%;box-sizing:border-box;border-width: 3px;border-style:solid;font-size: 20px;}
#sono1:checked+#sono1_cont{display:block;}
#sono2:checked+#sono2_cont{display:block;}
#sono3:checked+#sono3_cont{display:block;}
#sono4:checked+#sono4_cont{display:block;}
#sono5:checked+#sono5_cont{display:block;}
#tab{width: 100%;font-size:0;height:100%;}
.tabindex{display:inline-block;font-size:20px; width: 20%;height: 80px;text-align: center;border:#a5a5a5 1px solid;box-sizing:border-box;padding-top:25px;}
</style>
</head>
<body>
<div id="main">
<header>
<h1>ハイト１００％テスト</h1>
</header>
<div id="tab">
<label id="sono1lbl" for="sono1" class="tabindex">その１</label>
<input id="sono1" type="radio" name="nav" class="tabradio" checked>
<div id="sono1_cont" class="tabpage">その１</div>
<label id="sono2lbl" for="sono2" class="tabindex">その２</label>
<input id="sono2" type="radio" name="nav" class="tabradio">
<div id="sono2_cont" class="tabpage">その２</div>
<label id="sono3lbl" for="sono3" class="tabindex">その３</label>
<input id="sono3" type="radio" name="nav" class="tabradio">
<div id="sono3_cont" class="tabpage">その３</div>
<label id="sono4lbl" for="sono4" class="tabindex">その４</label>
<input id="sono4" type="radio" name="nav" class="tabradio">
<div id="sono4_cont" class="tabpage">その４</div>
<label id="sono5lbl" for="sono5" class="tabindex">その５</label>
<input id="sono5" type="radio" name="nav" class="tabradio">
<div id="sono5_cont" class="tabpage">その５</div>
</div>
</div>
</body>
</html>
