ページ読み込み時に映らない部分の色が表示されない

#実現したいこと
#####閲覧するブラウザやパソコンに依存せず、画面を一番下までスクロールした際に、ナビメニューの色（図緑枠）が途切れずに色が塗られている状態にしたい。
##背景
画面左にナビメニューと中央にテーブルが縦に二つ並んでいるWebページの作成を行っています。
html・cssの経験があまりなくインターネットで調べながら作成しているのですが、解決方法がどうしてもわからなかったため質問させていただきました。
##添付図についての説明

赤で囲っている部分が、ページを開いたときにディスプレイに映る範囲です。
図左の緑で囲っている部分は、ナビメニューしておりその部分だけ色を変えている状態です。

ナビメニューの高さは**height: 100%**としています。

画面中央にはテーブルが縦に二つ並んでおり、テーブル2に関してはページを開いた時点では全て見えない状態になっています。
画面にはスクロールを付け、下に移動することで図の青枠の範囲を見ることができます。

##試したこと
####heightを%ではなくvhで指定

色が塗られている部分が伸びたが、ブラウザや閲覧するパソコンによってその長さが変わってしまい、「閲覧するブラウザやパソコンに依存しない」という根本的な解決はできませんでした。
vhの値を大きくしすぎた場合（例：200vh）、テーブル2よりさらに下の空白の部分が増えてしまう。

html
1<!DOCTYPEhtml>
2<html>
3<head>
4<metacharset="utf-8">
5<title>test</title>
6<linkrel="stylesheet"href="./css/common.css"/>
7<linkrel="stylesheet"href="./css/test.css"/>
8</head>
9<body>
10<divclass="main">
11<divclass="top-box"style="text-align:left;">
12</div>
13<divclass="nav">
14<divclass="nav-item">
15<divid='i1'class="itemno-act">メニュー</div>
16<divclass="hide">
17<div>
18<divid='i11'class="item1no-act">メニュー</div>
19<divclass="">
20<divclass="item2">メニュー</div>
21<divclass="item2">メニュー</div>
22</div>
23</div>
24</div>
25</div>
26<divclass="nav-item">
27<divclass="hide">
28<div>
29<divid='i31'class="itemno-act">メニュー</div>
30<divclass="hide">
31<divclass="item2">メニュー</div>
32<divclass="item2">メニュー</div>
33</div>
34</div>
35<div>
36<divid='i32'class="item1no-act">メニュー</div>
37<divclass="hide">
38<divclass="item2">メニュー</div>
39<divclass="item2">メニュー</div>
40</div>
41</div>
42<div>
43<divid='i33'class="item1no-act">メニュー</div>
44<divclass="hide">
45<divclass="item2">メニュー</div>
46<divclass="item2">メニュー</div>
47</div>
48</div>
49</div>
50</div>
51<divclass="nav-item">
52<divid='i3'class="itemchoose">メニュー</div>
53</div>
54<divclass="nav-item">
55<divid='i4'class="itemno-act">メニュー</div>
56<divclass="hide">
57<div>
58<divid='i41'class="item1no-act">メニュー</div>
59<divclass="">
60<divclass="item2">メニュー</div>
61<divclass="item2">メニュー</div>
62<divclass="item2">メニュー</div>
63</div>
64</div>
65</div>
66</div>
67</div>
68<divclass="content">
69<divclass="content">
70<divclass="title">項目</div>
71<formaction=""class="default-form">
72<tableclass="input-table">
73<thead>
74<tr>
75<thclass="start-restart-box"><labelclass="default-label"for="">項目</label></th>
76<tdclass="start-restart-box">
77<inputtype="checkbox">
78<labelfor="start-restart"class="choose-label"/>
79</td>
80</tr>
81<thead>
82<tbody>
83<tr>
84<th><labelclass="default-label">項目</label></th>
85<td><inputtype="text"class="default-input"placeholder="項目"/></td>
86</tr>
87<tr>
88<th><labelclass="default-label"for="">項目</label></th>
89<td>
90<labelstyle="display:block;">
91<inputclass="a-radio"type="radio"><spanclass="b-radio"></span>項目
92</label>
93<labelstyle="display:block;">
94<inputclass="a-radio"type="radio"><spanclass="b-radio"></span>項目
95</label>
96<labelstyle="display:block;">
97<inputclass="a-radio"type="radio"><spanclass="b-radio"></span>項目
98</label>
99<labelstyle="display:block;">
100<inputclass="a-radio"type="radio"><spanclass="b-radio"></span>項目
101</label>
102</td>
103</tr>
104<tr>
105<th><label>項目</label></th>
106<td><inputtype="text"placeholder="項目"/>
107</td>
108</tr>
109<tr>
110<th><labelclass="default-label">項目</label>
111</th>
112<td>
113<labelstyle="display:block;">
114<inputtype="radio"><spanclass="b-radio"></span>項目
115</label>
116<labelstyle="display:block;">
117<inputtype="radio"><spanclass="b-radio"></span>項目
118</label>
119<labelstyle="display:block;">
120<inputtype="radio"><spanclass="b-radio"></span>項目
121</label>
122
123</td>
124</tr>
125<tr>
126<th><labelclass="default-label">項目</label></th>
127<td>
128<selectclass="default-select">
129<option>項目</option>
130<option>項目</option>
131<option>項目</option>
132<option>項目</option>
133<option>項目</option>
134<option>項目</option>
135<option>項目</option>
136<option>項目</option>
137<option>項目</option>
138<option>項目</option>
139<option>項目</option>
140<option>項目</option>
141</select>
142</td>
143</tr>
144<tr>
145<th><labelclass="default-label">項目</label></th>
146<td>
147<selectclass="default-select">
148<option>項目</option>
149<option>項目</option>
150<option>項目</option>
151<option>項目</option>
152<option>項目</option>
153<option>項目</option>
154<option>項目</option>
155<option>項目</option>
156<option>項目</option>
157<option>項目</option>
158<option>項目</option>
159<option>項目</option>
160<option>項目</option>
161<option>項目</option>
162<option>項目</option>
163<option>項目</option>
164<option>項目</option>
165<option>項目</option>
166<option>項目</option>
167<option>項目</option>
168</select>
169</td>
170</tr>
171<tr>
172<th><labelclass="default-label">項目</label></th>
173<td>
174<labelstyle="display:block;">
175<inputclass="a-radio"type="radio"></span>項目
176</label>
177<labelstyle="display:block;">
178<inputclass="a-radio"type="radio"></span>項目
179</label>
180</td>
181</tr>
182<tr>
183<th><labelclass="default-label">項目</label></th>
184<td>
185<labelstyle="display:block;">
186<inputclass="a-radio"type="radio"><spanclass="b-radio"></span>項目
187</label>
188<labelstyle="display:block;">
189<inputclass="a-radio"type="radio"><spanclass="b-radio"></span>項目
190</label>
191<labelstyle="display:block;">
192<inputclass="a-radio"type="radio"><spanclass="b-radio"></span>項目
193</label>
194<labelstyle="display:block;">
195<inputclass="a-radio"type="radio"><spanclass="b-radio"></span>項目
196</label>
197<labelstyle="display:block;">
198<inputclass="a-radio"type="radio"><spanclass="b-radio"></span>項目
199</label>
200<labelstyle="display:block;">
201<inputclass="a-radio"type="radio"><spanclass="b-radio"></span>項目
202</label>
203</td>
204</tr>
205</tbody>
206</table>
207
208<divclass="form-box"style="padding:10px">
209<divstyle="color:#333333;font:bold;font-size:24px;border-bottom:1pxsolid#000">項目
210</div>
211</div>
212
213<tableclass="input-table">
214<tbody>
215<tr>
216<th><labelclass="default-label">項目</label></th>
217<td>
218<labelstyle="display:block;">
219<inputclass="a-radio"type="radio"name="invisible"><span
220class="b-radio"></span>項目
221</label>
222<labelstyle="display:block;">
223<inputclass="a-radio"type="radio"name="invisible"><span
224class="b-radio"></span>項目
225</label>
226</td>
227</tr>
228<tr>
229<th><labelclass="default-label">項目</label></th>
230<td>
231<labelstyle="display:block;">
232<inputclass="a-radio"type="radio"><spanclass="b-radio"></span>項目
233</label>
234<labelstyle="display:block;">
235<inputclass="a-radio"type="radio"><spanclass="b-radio"></span>項目
236</label>
237</td>
238</tr>
239<tr>
240<th><labelclass="default-label">項目</label></th>
241<td>
242<inputtype="text"placeholder="項目"/>
243</td>
244</tr>
245<tr>
246<th><labelclass="default-label">項目</label></th>
247<td>
248<inputtype="text"placeholder="項目"/>
249</td>
250</tr>
251
252<tr>
253<th><labelclass="default-label"for="prefix_length">項目</label></th>
254<td>
255<inputoninput="value=value.replace(/[^\d]/g,'')"type="text"placeholder="項目"/>
256</td>
257</tr>
258
259<tr>
260<th><labelclass="default-label"for="gateway_ip">項目</label></th>
261<td>
262<inputtype="text"placeholder="項目"/>
263</td>
264</tr>
265</tbody>
266</table>
267<divclass="horizontal-button">
268<divonclick="apConfigSet()"class="button-common">項目</div>
269</div>
270</form>
271</div>
272</div>
273</div>
274</body>
275</html>

css
1html,body{
2height:100%;
3
4}
5.main{
6height:100%;
7}
8.main.top-box{
9text-align:center;
10font-size:20px;
11height:100px;
12line-height:150px;
13background-color:#118;
14color:#D8FF9D;
15position:relative;
16}
17div{
18font-weight:bold;
19color:#383838
20}
21.main.top-boxspan{
22font-weight:600;
23color:#fff
24}
25.main.nav{
26float:left;
27height:100%;
28width:25%;
29border-right:1pxsolid#999999;
30background-color:#181;
31
32overflow:hidden;
33}
34.main.nav.hide{
35display:none;
36}
37.main.nav.item,
38.main.nav.item1,
39.main.nav.item2{
40position:relative;
41line-height:60px;
42border-bottom:1pxsolid#999999;
43cursor:pointer;
44white-space:normal;
45text-overflow:ellipsis;
46word-break:break-all;
47}
48.main.nav.item{
49padding:010px;
50font-size:16px;
51}
52.main.nav.item1{
53padding:020px;
54font-size:14px;
55}
56.main.nav.item2{
57padding:030px;
58font-size:12px;
59}
60.main.nav.choose{
61background-color:#5b9bd5;
62}
63.main.nav.hide.choose{
64background-color:#fff;
65}
66.main.nav.active::after{
67content:'';
68width:0;
69height:0;
70position:absolute;
71border-right:10pxsolidtransparent;
72border-left:10pxsolidtransparent;
73border-bottom:10pxsolid#d8d8d8;
74right:20px;
75top:20px;
76}
77.main.nav.no-act::after{
78content:'';
79width:0;
80height:0;
81position:absolute;
82border-right:10pxsolidtransparent;
83border-left:10pxsolidtransparent;
84border-top:10pxsolid#d8d8d8;
85right:20px;
86top:20px;
87}
88.main.content{
89position:relative;
90text-align:left;
91float:right;
92width:calc(75%-5px);
93height:calc(100%-84px);
94overflow-y:visible;
95background-color:#fff;
96}
97.main.contentiframe{
98width:100%;
99height:100%;
100}
101
102.main.nav2{
103float:left;
104height:100%;
105width:25%;
106border-right:1pxsolid#999999;
107}
108.main.nav2.hide{
109display:none;
110}
111.main.nav2.item,
112.main.nav2.item1,
113.main.nav2.item2{
114position:relative;
115line-height:60px;
116border-bottom:1pxsolid#999999;
117cursor:pointer;
118white-space:nowrap;
119text-overflow:ellipsis;
120word-break:break-all;
121}
122.main.nav2.item{
123padding:010px;
124font-size:16px;
125}
126.main.nav2.item1{
127padding:020px;
128font-size:14px;
129}
130.main.nav2.item2{
131padding:030px;
132font-size:12px;
133}
134.main.nav2.choose{
135background-color:#5b9bd5;
136}
137.main.nav2.hide.choose{
138background-color:#fff;
139}
140.main.nav2.active::after{
141content:'';
142width:0;
143height:0;
144position:absolute;
145border-right:10pxsolidtransparent;
146border-left:10pxsolidtransparent;
147border-bottom:10pxsolid#d8d8d8;
148right:20px;
149top:20px;
150}
151.main.nav2.no-act::after{
152content:'';
153width:0;
154height:0;
155position:absolute;
156border-right:10pxsolidtransparent;
157border-left:10pxsolidtransparent;
158border-top:10pxsolid#d8d8d8;
159right:20px;
160top:20px;
161}