How to lay out 12 blocks in the full height of the screen of a mobile device?

Question

JavaScript

If you count as usual:

var getBrowserHeight = document.documentElement.clientHeight,
              getSectionHeight = getBrowserHeight / 12,

Then a strip is obtained from below, as I understand it, because of the sidebar disappearing from below.
Are there any ways to solve the current situation? )
Added :
_bodymin-height: 100vh;

Answer 1

Everything turned out to be much simpler, it was necessary to specify >_< bodyinsteadmin-heightheight

Answer 2

worth using flexbox

body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    align-items: stretch;
}

.block {
    flex-grow: 1;
    flex-shrink: 1;
}

Answer 3

But what if 100% instead of 100vh try to set for body?
Or there is 1 more option, try to add in advance to the height, the height of the sidebar:

height: calc(100vh + 60px); 60px - /*примерная высота панели навигации, точно посмотрите сами*/