how make div viewport height, not page height in CSS?

All the suggestions to use top: 0em; bottom 0em; are incorrect. If the page is taller than the viewport, that code stretches the div beyond the viewport's bottom.

The other suggestion to use 100vh unfortunately doesn't have enough support (I need it to work in the Android browser prior to 4.4).

Is this possible with only CSS?

Solution

To make an element 100% height, set your html, body, and element to have a height of 100%.

html,
body,
#your-element { height:100%; }

EDIT - Snippet:

* { margin:0; padding:0; }
html,body,div { height:100%; }
div { background: #0f0; }

<div></div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>