flex 布局实现固定头部和底部，中间滚动布局
2024-09-17 09:53:04
关键词：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来啦！
* {
line-height: 1.2;
margin:;
}
html, body {
font-family: sans-serif;
height: 100%;
width: 100%;
}
.container{
display: flex; // 关键， flex布局
flex-direction: column; // 关键，三块主题column摆放。
height: 100vh; // 关键，设置高度为可见高度的100%；
}
.head{
width: 100%;
background: springgreen;
}
.body{
flex:; // 关键， 填充剩余空间
width: 100%;
background: lightyellow;
overflow-y: scroll; // 关键， 超出部分滚动
}
.footer{
width: 100%;
background: goldenrod;
}
附上全部代码，可以自己复制到浏览器中打开，看效果~
<!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>
最新文章
- 关于控件的Invoke(...)方法和BeginInvoke(...)方法的区别
- 关于webpack.optimize.CommonsChunkPlugin的使用二
- PATH变量
- CStringArray用法
- WIN7 64位系统注册银行支付组件
- Swift(二,元组,可选类型,类型转化)
- Nginx 配置指令的执行顺序（十一）
- 关于oracle导出时的query用法
- 银盛支付ecshop,shopex,shopnc在线支付接口，php版本支付接口开发
- 学习vi和vim编辑器（5）：越过基础的藩篱
- 微服务之分布式跟踪系统（springboot+zipkin+mysql）
- 廖雪峰Java1-4数组操作-4多维数组
- JavaScript：几种常用循环
- harbor仓库镜像的删除
- javascript札记
- 汇编语言程序环境搭建masm+debug64位 win10/7
- zk集群的快速搭建
- 高可用Kubernetes集群-9. 部署kubelet
- Navicat工具导出mySQL数据库某个视图结构的.sql脚本
- drone 学习一 几个核心组件