ManuKaracho ManuKaracho - 5 months ago 29
CSS Question

Move div to bottom of the screen with css transform

I want to move a div to the bottom of the screen.
The translate property only moves the div in relation to its size:

<html>
<body>
<div class="test"></div>
</body>
</html>

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

.test{
height: 25%;
width: 100%;
transform: translate(0,100%);
background: blue;
}


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?

http://codepen.io/anon/pen/dXWGAm

Answer

Use vh instead of %, that way it moves it 75% down the height of the screen, leaving the other 25% for your div.

I would also recommend you change the height of your div to 25vh to ensure that it sits on the bottom.

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}
.test {
  height: 25vh;
  width: 100%;
  transform: translate(0, 75vh);
  background: blue;
}
<html>

<body>
  <div class="test"></div>
</body>

</html>