我想将 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移动到屏幕底部?
使用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)