Move div to bottom of the screen with css transform
<p>I want to move a div to the bottom of the screen.
The translate property only moves the div in relation to its size:</p>
<pre><code> &lt;html&gt;
  &lt;body&gt;
    &lt;div class=&quot;test&quot;&gt;&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;

html, body{
  margin: 0;
  width: 100%;
  height: 100%;
}

.test{
  height: 25%;
  width: 100%;
  transform: translate(0,100%);
  background: blue;
}
</code></pre>
<p>This will move the div downwards by 100% of it's height (25% of the screen).
How can I move the div to the bottom of the screen?</p>
<p><a href="http://codepen.io/anon/pen/dXWGAm" rel="nofollow noreferrer">http://codepen.io/anon/pen/dXWGAm</a></p>