css页面内容不够高footer始终位于页面底部

时间：12-16来源：作者：点击数：

当页面内容很少的时候，footer会在页面中间就很难看，所以希望通过css实现当页面内容不够高时，footer始终位于页面底部。

修改前是这样的，假设内容很少，footer就在屏幕中间

通过Flex实现方法，直接上代码：

<html>
<body>
<header></header>
<div class="page-content">
页面html结构是这样的
</div>
<footer></footer>
</body>
</html>

实现css样式：

html {
height:100%;
}
body {
height: 100%;
display: flex;
flex-direction: column;
}
.page-content {
flex-grow:1;
}

把中间页面内容flex-grow设为1，这样会自动撑开，这样当页面高度不够时，footer也会被撑到页面底部。下图是实现后的效果：

这样修改后，页面高度足够高时的表现就和普通的没有区别出现滚动条往下滚后看到footer内容。

方便获取更多学习、工作、生活信息请关注本站微信公众号 城东书院微信服务号

高考生入学注意：这些大	【健康】纯净水、天然
14种竞赛生升学路径盘	excel后缀xls和xlsx有