get size of displayed web page without browser application bars with css
<p>I am creating a simple web page that displays text from a text input, and I want to make the text input to take up the whole displayed web page (without the browser bar), the 100vh technique includes the browser bar and I do not want to guess the top bar size</p>

<p>Here is my code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function focus() { // to easily focus an element
 document.getElementById("title").focus();
}

document.addEventListener('click', function (event) { // make sure the user's focus is stuck to the text input 
 if (event.target !== document.getElementById("title")) {
  document.getElementById("title").focus();
 }
}, false);
window.onload = function () {document.getElementById("title").focus();};

function apply() { // applies title
 setTimeout(function () {
  var str = document.getElementById("title").value;
  if (!str.replace(/\s/g, '').length) {
   document.title = "title-text";
  } else {
   document.title = str;
  }
 },1);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;title-text&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
  &lt;input type="text" id="title" onkeypress="apply()" autocomplete="off"&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>

(the JS binds the focus to the text box)</p>