Question

我想将div移动到屏幕的底部。 translate属性仅根据其大小移动div：

 <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;
}

这会将div向下移动100％的高度（屏幕的25％）。如何将div移动到屏幕底部？

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

Answer 1

使用vh代替%，这样就可以将屏幕高度缩小75％，另外25％用于div。

我还建议您将div的高度更改为25vh，以确保它位于底部。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用position:absolute并制作bottom:0px;而不是变换属性。

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>

Answer 3

使用position:absolute是最好的方式

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>

但是你特别需要transform使用这个

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>

当您的身高固定为25%时，使用75vh
没问题

Answer 4

你喜欢这个，

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：https://jsfiddle.net/17d80ym3/19/

使用css转换将div移动到屏幕底部

4 个答案: