ビューポート単位

ウィンドウに合わせてdivをサイズを変更するのにheight:100%は動かないのでvhを使ってみます。
vhはViewport heightの略で他にvh、vw、vmin、vmaxとゆうViewport単位があります。

ビューポート-パーセンテージ length

vhViewport heightビューポートの高さの 1/100
vwViewport Widthビューポートの幅の 1/100
vminViewport Minimumビューポートの高さまたは幅の、最小値の 1/100
vmaxViewport Maximumビューポートの高さまたは幅の、最大値の 1/100
ショートコードでMarkdown風tableタグ

デモ・プラクティス

※デモはiFrameで表示している為、エリア内がwindowと同様だとおもってください。

RAW HTML
例1
width:100%;hieght:100vhでスクロールバーが表示されるタイプのブラウザだと、スクロールバー分赤い線がはみ出ています。
例2
width:100%;hieght:100vhでスクロールバー分は外して表示されます。
例3
margincalcvwを利用すると親のwidthを無視してエリアのwidthを全画面いっぱいに引っ張ることが出来ます。こちらもスクロールバー分はみ出てます。

スクロールバーを変更

ビューポート単位を利用する場合には、スクロールバーをデザインを変更するようなscriptを一緒に導入すると良いかもしれません。

スクロールバーをカスタマイズする「perfect-scrollbar」