logo标签列表

使用CSS transform将div移动到屏幕底部。

htmlcss
7
我希望将一个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
4个回答
8

使用vh代替%，这样它就会向屏幕高度的75%移动，留下另外的25%给你的div。

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

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>

transform: translate(0, calc(100vh - 25%)) 不能假设 % 等同于 vh。 - Mr_Green
@Mr_Green 很好的建议 - 所以我已经添加了一条评论，说最好将高度从25％更改为25vh。 - CalvT
在移动设备上，您会发现vh存在问题，因为至少Chrome将地址栏包含在100vh的一部分中。 - Dave
1
使用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没有问题。
正如我所说，我想使用 transform: translate(); - ManuKaracho
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>

正如我所说，我想使用 transform: translate(); - ManuKaracho
那个 div 的父元素是什么？ - Sagar Kodte
0
你喜欢这个吗，
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/

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接