关键词:display: flex,flex: 1, overflow-y: scroll;
实现:head 和footer 固定,中间body多了滚动,少了撑满; head和footer宽度根据内容撑起,当然你可以自己设置........
小二,上代码!
来喽~~
// html布局 <html> <body> <div class="container"> <div class="head">page not foundpage not foundpage not foundpage not foundpage</div> <div class="body"> <div>orry, but the page you were trying to view does not exist.</div> <div>shhhhsss</div> <div>shhhhsss</div> <div>shhhhsss</div> <div>shhhhsss</div> <div>shhhhsss</div> </div> <div class="footer">page not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not found</div> </div> </body> </html>
关键的css来啦!
2 * { 3 line-height: 1.2; 4 margin: 0; 5 } 6 html, body { 7 font-family: sans-serif; 8 height: 100%; 9 width: 100%; 10 } 11 .container{ 12 display: flex; // 关键, flex布局 13 flex-direction: column; // 关键,三块主题column摆放。 14 height: 100vh; // 关键,设置高度为可见高度的100%; 15 } 16 .head{ 17 width: 100%; 18 background: springgreen; 19 } 20 .body{ 21 flex: 1; // 关键, 填充剩余空间 22 width: 100%; 23 background: lightyellow; 24 overflow-y: scroll; // 关键, 超出部分滚动 25 } 26 .footer{ 27 width: 100%; 28 background: goldenrod; 29 }
附上全部代码,可以自己复制到浏览器中打开,看效果~
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>page not found</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { line-height: 1.2; margin: 0; } html, body { color: #888; font-family: sans-serif; height: 100%; width: 100%; } .container{ display: flex; height: 100vh; flex-direction: column; } .head{ width: 100%; background: springgreen; } .body { background: lightyellow; width: 100%; flex:1; color: black; overflow-y: scroll; } .footer { background: goldenrod; width: 100%; } .body div { height: 200px; width: 300px; background: greenyellow; margin: 20px; } </style> </head> <body> <div class="container"> <div class="head">page not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not found</div> <div class="body"> <div>orry, but the page you were trying to view does not exist.</div> <div>shhhhsss</div> <div>shhhhsss</div> <div>shhhhsss</div> <div>shhhhsss</div> <div>shhhhsss</div> </div> <div class="footer">page not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not foundpage not found</div> </div> </body> </html>
如对本文有疑问, 点击进行留言回复!!
清除新版Google Chrome浏览器中表单控件(input,button...)默认的黑色边框
荐 20200714——git/mac配置/项目运行步骤/一些报错
antd 菜单组件 使用时报错:Cannot read property ‘isRootMenu‘ of undefined
CSS|div的style=“background-image: url(img/a.bmp)图片显示不出来
硬件仪表盘账号建立指导(一) --WHQL认证测试结果提交账号(一)
cookie的规范Cookie的不可跨域名性或Cookie与域名的关系
网友评论