怎么做网站的浏览栏,品牌建设费用包括哪些?,网站改成html5,设计专业就业方向中间内容高度不够屏幕高度撑不开的页面时候#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区域不能自动填充。
