How to find the true viewport height?

I have html content generated by php, which is designed to fit the height of the screen. To do this, I scale the content in the style spec according to vh.

This works nicely on a desktop PC, but the actual target is a mobile or cell phone, and the two browsers I have tried (Samsung and Chrome) steal some of the vh for their own header and footer.

This defeats my purpose: that the whole content can be seen without scrolling. Yes, you can scroll the header out of the way to expand the page, but I have a sequence of generated pages and this boringly defeats the object.

The amount isn't predictable. For 20 equal lines of text, 20 are shown on the Windows desktop with Firefox, and anywhere between about 16.5 and 18.5 lines on the Android screens, until you stroke it, and the amount also varies between portrait and landscape orientation.

Here is some example code to illustrate

body {
  font-family: sans-serif;
  font-size: 4vh;
  color: black;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

p {
  font-size: 1em;
  color: black;
  height: 5vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.p1 {
  background-color: lightblue;
}

.p2 {
  background-color: lightgreen;
}

<p class='p2'>1 pQHMAlldFRVc
<p class='p1'>2 GBkNDXfFzsTj
<p class='p2'>3 RPgrnVsMCSYq
<!-- skip lines 4 to 18 -->
<p class='p2'>19 ZBWbDuFKRrEM
<p class='p1'>20 DyJEHsQoiiFo

Is there a way in CSS styling to get the true height of the viewport after the system has stolen some of it? The alternative is to design the pages deliberately short, but as the amount isn't consistent between browsers, the guesswork wastes space, and might not be enough for a browser I haven't yet tried.