7

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

Improve this question
0

4 Answers 4

Reset to default
8

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>

Improve this answer
3
  • transform: translate(0, calc(100vh - 25%)) can't assume that % is same to vh.
    – Mr_Green
    Commented Jun 30, 2016 at 9:43
  • @Mr_Green good point - so I've added a comment saying it would be better to change height from 25% to 25vh
    – CalvT
    Commented Jun 30, 2016 at 9:46
  • You will find issues with vh on mobile as chrome at least includes the address bar as part of 100vh
    – Dave
    Commented Feb 8, 2020 at 0:09
1

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 using 75vh

Improve this answer
1
  • As I stated, i want to use transform: translate();
    – ManuKaracho
    Commented Jun 30, 2016 at 9:41
0

You can use position:absolute and make bottom:0px; instead of transform property. 

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

.test{
  height: 25%;
  width: 100%;
  position:absolute;
  bottom:0px;
  background: blue;
}
  <body>
    <div class="test"></div>
  </body>

Improve this answer
2
  • As I stated, i want to use transform: translate();
    – ManuKaracho
    Commented Jun 30, 2016 at 9:42
  • is there any parent of that div?
    – Sagar Kodte
    Commented Jun 30, 2016 at 9:46
0

Do you like this,

Html:

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

Css:

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

.test{
 position:absolute;
  bottom:0px;
  height: 25%;
  width: 100%;
  transform: translateX(0,100%);
  background: blue;
}

JSFiddle here: https://jsfiddle.net/17d80ym3/19/

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.