javascript - get missing height from screensize of website -

the website structure following:

1) topbar

2) navbar

3) canvas fitting missing screen size

4) bottom bar

---

my problem following: how missing screen size canvas, example user opens site, topbar got height css attribute contains: 46px, navbar got height 46px , bottom bar: 46px.

how missing screen size 100% fit whole missing screen, heres screenshot:

the red marked area missing size need fill screen.

---

i hope can me.

i think looking vh view height.

something .contents{width: 100%; height: calc(100vh - 92px)}

see example https://jsfiddle.net/sxh0n7d1/49/

that set div 100% of remaining page after subtract 92px header , footer.