d4ne d4ne - 3 months ago 10
CSS Question

get missing height from screensize of website

The website structure would be the following:

1) Topbar

2) Navbar

3) Canvas fitting the missing screen size

4) Bottom bar




My problem is the following: How could I get the missing Screen size for the canvas, for example a user opens the site, the topbar got a
height
css attribute which contains: 46px, the navbar got a
height
46px and the bottom bar: 46px.

How would i get the missing screen size from 100% to fit the whole missing screen, heres a screenshot:

enter image description here

The red marked area is the missing size which i need to fill the screen.




I hope someone can help me.

Answer

I think what you are looking for is vh it is the view height.

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

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

That will set the div to 100% of the remaining page after you subtract 92px for the header and footer.