flex 布局实现固定头部和底部，中间滚动布局

Shimmer 发布于2019-04-22 16:12 / 2855人阅读

摘要：关键词，实现和固定，中间多了滚动，少了撑满和宽度根据内容撑起，当然你可以自己设置小二，上代码来喽布局关键的来啦关键，布局关键，三块主题摆放。

关键词：display: flex，flex: 1, overflow-y: scroll;

实现：head 和footer 固定，中间body多了滚动，少了撑满； head和footer宽度根据内容撑起，当然你可以自己设置........

小二，上代码！

来喽~~

// html布局
 html 
 body 
 div 
 div Page Not FoundPage Not FoundPage Not FoundPage Not FoundPage /div 
 div 
 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 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;
 6 html, body {
 7 font-family: sans-serif;
 8 height: 100%;
 9 width: 100%;
11 .container{
12 display: flex; // 关键， flex布局
13 flex-direction: column; // 关键，三块主题column摆放。
14 height: 100vh; // 关键，设置高度为可见高度的100%； 
16 .head{ 
17 width: 100%;
18 background: springgreen;
20 .body{
21 flex: 1; // 关键， 填充剩余空间
22 width: 100%;
23 background: lightyellow;
24 overflow-y: scroll; // 关键， 超出部分滚动
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 
 div 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 
 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 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

云服务器 GPU云服务器 flex布局固定布局 java固定对象布局自定义布局怎么实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/782.html

flex 布局实现固定头部和底部，中间滚动布局

摘要：关键词，实现和固定，中间多了滚动，少了撑满和宽度根据内容撑起，当然你可以自己设置小二，上代码来喽布局关键的来啦关键，布局关键，三块主题摆放。关键词：display: flex，flex: 1, overflow-y: scroll; 实现：head 和footer 固定，中间body多了滚动，少了撑满； head和footer宽度根据内容撑起，当然你可以自己设置........ 小二，上代...

Pines_Cheng 2019-04-22 19:50 评论0 收藏0
flex 布局实现固定头部和底部，中间滚动布局

摘要：关键词，实现和固定，中间多了滚动，少了撑满和宽度根据内容撑起，当然你可以自己设置小二，上代码来喽布局关键的来啦关键，布局关键，三块主题摆放。关键词：display: flex，flex: 1, overflow-y: scroll; 实现：head 和footer 固定，中间body多了滚动，少了撑满； head和footer宽度根据内容撑起，当然你可以自己设置........ 小二，...

cfanr 2019-04-22 17:02 评论0 收藏0
flex 布局实现固定头部和底部，中间滚动布局

摘要：关键词，实现和固定，中间多了滚动，少了撑满和宽度根据内容撑起，当然你可以自己设置小二，上代码来喽布局关键的来啦关键，布局关键，三块主题摆放。关键词：display: flex，flex: 1, overflow-y: scroll; 实现：head 和footer 固定，中间body多了滚动，少了撑满； head和footer宽度根据内容撑起，当然你可以自己设置........ 小二，...

antyiwei 2019-04-22 16:34 评论0 收藏0
移动开发中固定布局

摘要：记录一下移动开发过程中出现的问题。若是涉及到移动开发布局中碰到固定某一部分，其余部分可滚动，尽量不要使用可用替代，若是不需要考虑兼容性，用更佳。记录一下移动开发过程中出现的问题。从最常见的布局说起，固定头部或底部算是最常见的需求了假定页面布局如下：实现头部、底部固定，中间滚动，有三种简单实现方式： fix...

XFLY 2019-08-23 14:03 评论0 收藏0
移动开发中固定布局

摘要：记录一下移动开发过程中出现的问题。若是涉及到移动开发布局中碰到固定某一部分，其余部分可滚动，尽量不要使用可用替代，若是不需要考虑兼容性，用更佳。记录一下移动开发过程中出现的问题。从最常见的布局说起，固定头部或底部算是最常见的需求了假定页面布局如下：实现头部、底部固定，中间滚动，有三种简单实现方式： fix...

Travis 2019-08-30 15:54 评论0 收藏0