Here is an example of a layout for a full-height email-like application. There is a fixed header at the top, a sidebar on the left that shows e.g. a list of folders, the main content is on the right that consists of a list of emails with a reading pane at the bottom.
The trick was to set height: 100% for all container elements first, then set a fixed height of 80px for the header. It turns out there is a calc function in CSS that you can use to calculate the height for the main region under the header: calc(100% - 80px) (it works in Chrome, FF, IE10+, Edge, Safari, Opera).
I then used display: flex on the main region to get the sidebar and the content section side by side. It works in Chrome, FF, Edge, Safari, Opera, mobile browsers and maybe IE10+.
Finally, I set a width for the sidebar and custom heights in percentages for the list of emails and the reading pane. You can get vertical scrollbars to appear with overflow-y: auto.
If you remove all but some <p> from the demo, you'll see that the scrollbars disappear but the background still covers the whole empty page which was also desired. I have not tested this on mobile devices but you can easily get the sidebar to be on top of the main region instead of next to it with other CSS flexbox tricks.