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

Man*_*cho 6 html css

我想将 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;
}
Run Code Online (Sandbox Code Playgroud)

这会将 div 向下移动 100% 的高度(屏幕的 25%)。如何将div移动到屏幕底部?

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

Cal*_*lvT 6

使用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;
}
Run Code Online (Sandbox Code Playgroud)
<html>

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

</html>
Run Code Online (Sandbox Code Playgroud)