【如何将 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;
}

编辑于2024-11-24

时间排序

热门排序

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

header{ /* 我们希望 header 采用固定的高度，只占用必须的空间 */ /* 0 flex-grow, 0 flex-shrink, auto flex-basis */

flex: 0 0 auto;}

.main-content{

/* 将 flex-grow 设置为1，该元素会占用全部可使用空间而其他元素该属性值为0，因此不会得到多余的空间*/ /* 1 flex-grow, 0 flex-shrink, auto flex-basis */

flex: 1 0 auto;}

footer{

/* 和 header 一样，footer 也采用固定高度*/ /* 0 flex-grow, 0 flex-shrink, auto flex-basis */ flex: 0 0 auto;}

用flex

查看全部>

编辑于2019-09-07

去第页