2025年02月11日 建站教程
flex布局如何将元素智能地固定在底部，下面web建站小编给大家详细介绍一下具体实现代码！
当内容不够时，按钮应该在页面底部。当有足够的内容时，按钮应该跟随内容。当遇到类似问题时，可以使用flex实现智能布局！
具体代码如下：
<div class="container"> <div class="main">这里为内容</div> <div class="footer">按钮</div> </div>
css代码如下：
.container {
height: 100vh;
/* 关键样式 */
display: flex;
flex-direction: column;
justify-content: space-between;
}
.main {
/* 关键样式 */
flex: 1;
background-image: linear-gradient(
45deg,
#ff9a9e 0%,
#fad0c4 99%,
#fad0c4 100%
);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.footer {
padding: 15px 0;
text-align: center;
color: #ff9a9e;
font-size: 14px;
}
本文链接：http://so.lmcjl.com/news/22945/