Setting height of website to always match screen height instead of scrolling

I have a simple website I am building, and essentially I want all of the content to website to always be above fold, and equal to the height of the screen no matter what device/size.

Right now, the website currently extends past the bottom on some mobile devices such as Android tablets, having a good size on devices such as an iPhone 5. I think part of the reason may be that the navigation bar at the top of the browsers pushes the bottom of the website under the fold. Is there an easy way I can account for this across browsers/devices.

Right now, the way I do it is just setting the div that contains all the other divs to a height of 100vh. This works on desktop and some browsers on iPhone, but does not work on iPhone Safari, iPad or Android tablet.

Essentially, I would rather shrink the content of my website rather than create a scroll bar, so how do I implement that on every browser?