要将div与其父div的底部对齐,同时保持父div的高度为100vh且不使用固定位置,可以使用flex布局来实现。
首先,将父div的样式设置为:
.parent {
display: flex;
flex-direction: column;
height: 100vh;
}
这样可以将子元素按照垂直方向排列,并且父div的高度为100vh。
然后,将子div的样式设置为:
.child {
margin-top: auto;
}
通过设置子div的上边距为auto,可以将子div推到父div的底部。
完整的HTML代码如下:
<div class="parent">
<div class="child">Content</div>
</div>
这样就实现了将div与其父div的底部对齐,同时保持父div的高度为100vh且不使用固定位置的效果。
推荐的腾讯云相关产品:腾讯云云服务器(CVM) 腾讯云云服务器(CVM)是一种可随时扩展的云计算服务,提供了高性能、可靠稳定的云服务器实例,适用于各类应用场景。您可以根据业务需求选择不同配置的云服务器实例,灵活部署和管理您的应用程序。
产品介绍链接地址:腾讯云云服务器(CVM)
领取专属 10元无门槛券
手把手带您无忧上云