【如何将 footer 保持在底部？】

如何将 footer 保持在底部？

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(1)

详细描述

截图

代码

html{
    height: 100%;
}
body{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.header{
    flex: 0 0 auto;
}
.main{
    flex: 1 0 auto;
}
.footer{
    flex: 0 0 auto;
}

编辑于2025-04-14

时间排序

热门排序

[北京|结业弟子]JS-肖明明
0

header{/*我们希望header采用固定的高度，只占用必须的空间*//*0flex-grow,0flex-shrink,autoflex-basis*/flex:00auto;}.main-content{/*将flex-grow设置为1，该元素会占用全部可使用空间而其他元素该属性值为0，因此不会得到多余的空间*//*1flex-grow,0flex-shrink,autoflex-basis*/flex:10auto;}footer{/*和header一样，footer也采用固定高度*//*0flex-grow,0flex-shrink,autoflex-basis*/flex:00auto;}用flex 查看全部>

编辑于2019-09-07

去第页