首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

将div与其父div的底部对齐,同时保持父高度100VH且不使用固定位置

要将div与其父div的底部对齐,同时保持父div的高度为100vh且不使用固定位置,可以使用flex布局来实现。

首先,将父div的样式设置为:

代码语言:txt
复制
.parent {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

这样可以将子元素按照垂直方向排列,并且父div的高度为100vh。

然后,将子div的样式设置为:

代码语言:txt
复制
.child {
  margin-top: auto;
}

通过设置子div的上边距为auto,可以将子div推到父div的底部。

完整的HTML代码如下:

代码语言:txt
复制
<div class="parent">
  <div class="child">Content</div>
</div>

这样就实现了将div与其父div的底部对齐,同时保持父div的高度为100vh且不使用固定位置的效果。

推荐的腾讯云相关产品:腾讯云云服务器(CVM) 腾讯云云服务器(CVM)是一种可随时扩展的云计算服务,提供了高性能、可靠稳定的云服务器实例,适用于各类应用场景。您可以根据业务需求选择不同配置的云服务器实例,灵活部署和管理您的应用程序。

产品介绍链接地址:腾讯云云服务器(CVM)

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的视频

领券