中间内容高度不够屏幕高度撑不开的页面时候,页面footer部分都能保持在网页页脚(最底部)的方法
1、首先上图看显示效果
2、奉上源码
2.1、html部分
<body><header>头部</header><main>主区域</main><footer>底部</footer>
</body>
2.2、css部分
<style>html, body {margin: 0;padding: 0;width: 100%;height: 100%;}body {min-height: 100vh;display: grid;grid-template-rows: auto 1fr auto;}header {background: aquamarine;height: 40px;line-height: 40px;text-align: center;}footer {background: aquamarine;height: 50px;line-height: 50px;text-align: center;}main {margin: 0 auto;background: aqua;width: 80%;}</style>
3、全部代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>gridbox布局</title><style>html, body {margin: 0;padding: 0;width: 100%;height: 100%;}body {min-height: 100vh;display: grid;grid-template-rows: auto 1fr auto;}header {background: aquamarine;height: 40px;line-height: 40px;text-align: center;}footer {background: aquamarine;height: 50px;line-height: 50px;text-align: center;}main {margin: 0 auto;background: aqua;width: 80%;}</style>
</head>
<body><header>头部</header><main>主区域</main><footer>底部</footer>
</body>
</html>
4、原理
1、保留了
min-height: 100vh
这个方法,但随后我们使用grid-template-rows
来间隔。2、这种方法的技巧是使用特殊的网格单元
fr
。fr
表示“份数”,使用它要求浏览器计算剩余空间的可用“份数”,以分配给该列或该行。在这种情况下,它填充了页眉和页脚之间的所有可用空间,这也解决了 flexbox 方法的“缺陷”,main区域不能自动填充。