flex布局实现头尾固定，中间内容自适应

头尾固定，中间区域可以滑动效果是移动端最常见的效果，以京东页面为例。以前开发时常用的方法是用固定布局 position: fixed; 实现，但是该方法在 ios 上或者其他机型上会出现问题。现在，可以使用 flex 方法快速实现该布局。

代码实现：

html部分：

  <div class="box"><div class="header">头部区域</div><div class="content">中间内容区域</div><div class="footer">底部区域</div></div>

css部分：

html,body {height: 100%; /* 很重要 */
}
.box {width: 100%; height: 100vh; /* 很重要，如果设置成 100%，页面内容过多时不会固定 */display: flex;flex-direction: column;
}
.header {height: 60px;background-color: #8df;
}
.content {flex: 1; /* 很重要 */overflow-y: auto; /* 很重要，否则当该内容超过一屏时，尾部区域不会固定 */background-color: orange;
}
.footer {height: 60px;background-color: pink;
}
/* 让内容居中显示 */
.header,.content,.footer {display: flex;justify-content: center;align-items: center;
}

效果：

说明：css 样式中，一定要设置 html,body 以及最外层包裹容器的高度为 100%，同时中间内容区域的样式一定要添加 flex: 1; ，以及 overflow-y: auto; 。

flex布局实现头尾固定，中间内容自适应相关推荐

flex布局右列固定左列自适应，遇到white-space nowrap 影响布局超长的问题
关于display:flex碰上white-space nowrap 影响布局的问题缘由:想用flex实现,右边固定,左边文字自适应,并自动换行. 问题:文字撑满不换行布局效果如下图: 代码如下: ...
[css] 使用flex实现三栏布局，两边固定，中间自适应
[css] 使用flex实现三栏布局,两边固定,中间自适应同意里面的一个回答,现在有很多简单的实现方式,传统的这个也是一种hack的方式,真的没必要去追究了,但是核心知识点可以掌握.1.把 cent ...
CSS布局之——左边、上边固定，内容自适应（Vue）
 <template><div class="left_top_main"><div class= ...
[html] 写一个三栏布局，中间固定，两边自适应（平均）
[html] 写一个三栏布局,中间固定,两边自适应(平均) <style>html,body {height: 100%;margin: 0;padding: 0;}.container ...
[html] 写一个左中右的满屏布局，左右固定220px,中间自适应并且要优先加载
[html] 写一个左中右的满屏布局,左右固定220px,中间自适应并且要优先加载 <!DOCTYPE html> <html lang="en"> < ...
[html] 写一个三栏布局，两边固定，中间自适应
[html] 写一个三栏布局,两边固定,中间自适应 position + marginfloat + marginflex 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很 ...
flex布局均分高度了，没有自适应内容高度，怎么回事
前言 flex布局中,通常我们都希望子元素的高度是自适应.自动被内容撑开,我们的做法基本是直接display:flex,不需要额外再去设置其他属性就会得到下面的效果.但是最近使用uniapp模拟产品分 ...
CSS || 三栏布局，两边固定，中间自适应
1 float实现基于纯float实现的三栏布局需要将中间的内容放在HTML结构的最后,否则右侧会沉在中间内容的下侧原理:元素浮动后,脱离文档流,后面的元素受浮动影响,设置受影响元素的margin ...
CSS(一) 经典布局（两边固定，中间自适应）的五种方式
两边固定,中间自适应本篇总结五种思路实现方式, 圣杯布局圣杯布局,方便理解是带有两只耳朵的奖杯,耳朵跟奖杯是一体,所以左右两边跟中间同级,但是content在上面第一步:中间盒子100%,两边固 ...

flex布局实现头尾固定，中间内容自适应

代码实现：

效果：

flex布局实现头尾固定，中间内容自适应相关推荐

最新文章

热门文章