程序笔记

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

2024-08-30 19

当页面内容很少的时候，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内容。

更新于：20天前

赞一波！

全部评论