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内容。
方便获取更多学习、工作、生活信息请关注本站微信公众号
上一篇:网页内容很少时让footer处于最下方
下一篇:Flex布局学习使用教程示例
湘公网安备 43102202000103号