Menu
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
933
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>Using position:absolute is the best way like this
html, body{
margin: 0;
width: 100%;
height: 100%;
}
.test{
height: 25%;
width: 100%;
background:#000;
position:absolute;
left:0;
bottom:0;
}<html>
<body>
<div class="test"></div>
</body>
</html>But as you specifically need transform use this
html, body{
margin: 0;
width: 100%;
height: 100%;
}
.test{
height: 25%;
width: 100%;
background:#000;
transform:translate(0,75vh);
}<html>
<body>
<div class="test"></div>
</body>
</html>As your height is fixed to
25%no problem to using75vh
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
