上什么网站做会计教育,网页 网站,app store免费下载,西宁最好网站建设公司中间内容高度不够屏幕高度撑不开的页面时候#xff0c;页面footer部分都能保持在网页页脚#xff08;最底部#xff09;的方法
1、首先上图看显示效果 2、奉上源码
2.1、html部分
bodyheader头部/headermain主区域/mainfoot… 中间内容高度不够屏幕高度撑不开的页面时候页面footer部分都能保持在网页页脚最底部的方法
1、首先上图看显示效果 2、奉上源码
2.1、html部分
bodyheader头部/headermain主区域/mainfooter底部/footer
/body
2.2、css部分
stylehtml, 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 langen
headmeta charsetUTF-8titlegridbox布局/titlestylehtml, 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
bodyheader头部/headermain主区域/mainfooter底部/footer
/body
/html4、原理 1、保留了 min-height: 100vh 这个方法但随后我们使用 grid-template-rows 来间隔。 2、这种方法的技巧是使用特殊的网格单元 fr 。 fr 表示“份数”使用它要求浏览器计算剩余空间的可用“份数”以分配给该列或该行。在这种情况下它填充了页眉和页脚之间的所有可用空间这也解决了 flexbox 方法的“缺陷”main区域不能自动填充。
