使用Flex布局实现头部固定，内容区域滚动

最新推荐文章于 2024-04-15 16:43:52 发布
最新推荐文章于 2024-04-15 16:43:52 发布
阅读量2.4k 收藏 5
点赞数
分类专栏： 前端 flex布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zan_Z/article/details/107023902
版权

页面头部固定布局以前用 position:fixed实现，如今可以用flex布局实现，快捷方便。
Flex布局好处：1.不破坏html文档流 2.兼容性更好。
display: flex 和 display: -webkit-box 仅是各阶段命名,并没有区别。

<view>
	<view class="header"></view>
	<view class="content"></view>
最低0.47元/天 解锁文章
Zan^Z
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
flex 布局实现固定头部和底部，中间滚动布局
weixin_30332705的博客
04-17 573
关键词：display: flex，flex: 1, overflow-y: scroll; 实现：head 和footer 固定，中间body多了滚动，少了撑满； head和footer宽度根据内容撑起，当然你可以自己设置........ 小二，上代码！ 来喽~~ // html布局 <html> <body> <div class="conta...
flex布局实现上下固定，中间滑动的布局方式
宋坚强大大~~
02-20 8183
例如这样的一个页面，希望有个头图，有个底部的底栏，中部内容区域可滑动。 简单介绍一下如何实现： 固定头部和尾部，中间部分可滑动，使用flex布局 1.设置html，body高度为100% 2.设置最外层div的布局方式为弹性布局display:flex; 3.设置最外层div的主轴方向为flex-direction: column;主轴为垂直方向，起点在上...
flex布局超出之后滚动
最新发布
weixin_49203377的博客
04-15 478
flex布局超出之后滚动
css display:flex 属性
weixin_30652271的博客
01-21 872
一：display:flex 布局 display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。 Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和ve...
2019-11-15 CSS-flex弹性布局
xumaozeng的博客
11-15 298
2019-11-15 CSS-flex弹性布局flex布局简介父元素属性子元素上属性补充 简介：本文章结合项目经历来介绍下flex弹性布局的使用 flex布局简介 Flex是Flexible Box的缩写，简称“弹性布局”，用来为盒装模型提供最大的灵活性。采用Flex布局的元素，简称容器，它的所有子元素自动成为容器成员，简称项目。 父元素属性 display:flex;定义了一个flex容器 ...
一个页面两div,一个不显示滚动条，另一个显示滚动条
沧海一粟
11-23 729
一个页面： 按钮栏没有滚动条，内容栏有滚动条。 <div style="position:absolute;z-index:100;background:#eeeeee;margin-top:1px;"> 固定不动的内容在此 </div> <div style="overflow:scroll;width:200px;height:200px;border:1px solid red;position:absolute;z-index:1;padding-top:10px;
使用弹性布局 flex实现顶部固定，内容滚动
Mr_Chao的博客
07-07 3360
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
使用Flex布局实现头部固定内容区域滚动的方法
12-28
页面头部固定布局以前用 position:fixed实现，如今可以用flex布局实现，快捷方便。 Flex布局好处：1.不破坏html文档流 2.兼容性更好。 display: flex 和 display: -webkit-box 仅是各阶段命名,并没有区别。 page{ display: -webkit-box; //设置弹性布局 -webkit-box-orient: vertical; //设置子元素垂直布局 height:
flex布局实现上下固定中间滑动的布局方式
11-20
固定头部和尾部，中间部分可滑动，使用flex布局 1.设置html，body高度为100% 2.设置最外层div的布局方式为弹性布局display:flex; 3.设置最外层div的主轴方向为flex-direction: column;主轴为垂直方向，起点在上沿 ...
React Native之ListView实现九宫格效果的示例
08-29
在这里，你可以自定义每一行的布局和内容。 3. **onEndReached**：当用户滚动到底部时触发，通常用于加载更多数据。 4. **onEndReachedThreshold**：设定触发onEndReached 事件的阈值，即用户离列表底部还有多少距离...
DIV+CSS的布局元素.docx
11-26
`fixed`则使元素相对于浏览器窗口定位，常用于固定头部或侧边栏。 2. **浮动（Floating）** - `float`: `float`属性源于早期的Netscape浏览器，用于创建多列布局。元素可以`float:left`或`float:right`，使其在父...
DIV CSS的布局元素汇总.pdf
11-26
`fixed`则始终相对于浏览器窗口定位，常用于固定头部或侧边栏。 **浮动(float)**：`float`属性起源于Netscape浏览器早期的功能，允许元素在页面中浮动，常用于创建多列布局。`left`使元素向左浮动，`right`向右浮动...
头部固定，但是内容往上移并有遮盖的解决方案
XQXOI的博客
03-04 981
<template> <div class="demo"> <!-- <mt-header fixed title="long long long long title"> <mt-button slot="left">back</mt-button> <mt-button icon="mo...
flex布局实现自定义首尾固定 中间滚动
vue+echarts实现中国地图流动效果
03-25 615
最近在搞uniapp项目，根据业务需求实现自定义首尾中间自适应 原理： 设置body，html的width和height为100% 最外部盒子width，height设置100%沾满全屏并设置flex属性 通过flex-direction改变主轴方向为纵向 首尾盒子设置高度或者padding撑起 设置flex-shrink:0 中间部分用scroll-view ，width、height均为100%撑满 最后scroll-view设置overflow：hidden 就可以了 直接上代码 <temp
用flex实现头部固定，内容部分滚动
GonTinyBlack的博客
06-13 1725
用flex实现头部固定，内容部分滚动 我就只想要一个像我标题一样这么简单的东西，其他的文章都给我搞了一堆乱七八糟的玩意，要么就是copy别人的，这就是我厌恶现在的网络文章的原因。看好了，其实很简单。 HTML部分 <div class="main"> <div class="main-header"> header的内容 </div> <div class="main-body"> body的内容 &lt
【移动端网页布局】Flex 弹性布局案例 ② ( 顶部固定定位搜索栏 | 固定定位盒子居中对齐 | 二倍精灵图设置 | CSS3 中的垂直居中对齐 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
05-14 9959
一、顶部固定定位搜索栏 1、固定定位盒子居中对齐 2、设置最大宽度和最小宽度 3、使用 Flex 弹性布局管理宽度 4、二倍精灵图设置 5、CSS3 中的垂直居中对齐 - 行高 = 内容高度 ( 总高度 - 边框高度 - 内边距高度 ) 二、代码示例 1、HTML 标签结构 2、CSS 样式 3、展示效果
Html页面表头固定用display,table中，表头固定，body滚动的方式。也就是使用：css Table布局-display:table...
weixin_36297610的博客
06-03 751
两种类型的表格布局你有两种方式使用表格布局-HTML Table(标签)和CSS Table(display:table等相关属性)。HTML Table是指使用原生的标签，而CSS Table是指用CSS属性模仿HTML表格的模型。js 代码:table {display:table }tr {display:table-row }thead {displa...
CSS之经典flex布局——头部底部固定，中间部分自适应高度
bossxu_的博客
07-20 3388
1.外部盒模型 flex ，子元素竖向排列；给顶部和底部元素 固定高度；中间元素 flex-grow: 1; 2.中间元素左右固定,中间自适应；左右元素固定宽度；中间元素flex:1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex 经典布局</title> <style> html
uniapp中使用自定义tabbar组件后页面头部没有了
06-07
在使用自定义tabbar组件后，页面头部没有了，这可能是因为自定义tabbar组件使用了fixed定位，导致整个页面的滚动区域被遮挡了，而页面头部通常是在滚动区域内的。您可以通过以下方法来解决这个问题： 1. 在自定义...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值