gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-31 08:25:28 30 4
gpt4 key购买 nike

我想将一个 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

最佳答案

使用 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>

关于html - 使用 css 变换将 div 移动到屏幕底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38119271/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com