上下两边固定中间滑动布局

已于 2024-09-13 09:33:37 修改
阅读量340 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： css 文章标签： 前端 html css
于 2024-07-11 14:47:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75874827/article/details/140351911

页面中使用flex布局来制作一个上中下布局的结构

<-- calc这个计算函数减去的值必须大于底部的高度-->
<div class="flex flex-col h-[calc(100vh-80px)]">
	<div class="">顶部（可以在里面的元素中设置元素高度）</div>
	<div class="overflow-y-auto flex-1">中间</div>
	<div class="">底部（可以在里面的元素中设置元素高度）</div>
</div>
flex的介绍可以看这里

上下固定，中间滚动布局
jean_0920的博客
09-19 1208
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
html 上下固定中间滚动,flex布局实现上下固定中间滑动的布局方式
weixin_39791386的博客
06-09 1432
本文主要介绍了flex布局实现上下固定中间滑动的布局方式，分享给大家，具体如下:例如这样的一个页面，希望有个头图，有个底部的底栏，中部内容区域可滑动。简单介绍一下如何实现固定头部和尾部，中间部分可滑动，使用flex布局1.设置html，body高度为100%2.设置最外层div的布局方式为弹性布局display:flex;3.设置最外层div的主轴方向为flex-direction: column...
flex布局实现上下固定中间滑动的布局方式
11-20
本文主要介绍了flex布局实现上下固定中间滑动的布局方式，分享给大家，具体如下: 例如这样的一个页面，希望有个头图，有个底部的底栏，中部内容区域可滑动。 简单介绍一下如何实现 固定头部和尾部，中间部分可滑动，使用flex布局 1.设置html，body高度为100% 2.设置最外层div的布局方式为弹性布局display:flex; 3.设置最外层div的主轴方向为flex-direction: column;主轴为垂直方向，起点在上沿 row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 colum
flexbox常用布局上下固定，中间滚动
weixin_33937913的博客
08-03 626
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width"&gt; &lt;title&gt;JS Bin&lt;/title&amp
CSS中的Flex（弹性盒子布局）的使用方法、使用场景、使用案例、
最新发布
DaKangya的博客
05-24 427
布局类型语法组合水平居中垂直居中完全居中水平两端对齐垂直排列支持换行。
flex布局
syh12345_的博客
07-30 264
1.给父容器添加display: flex/inline-flex;属性，即可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式；在item里面使用的任何布局都会失效 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .box{ width: ...
flex上下固定中间滚动布局
Haines
11-09 1128
html <div class="wrap"> <div class="header">header</div> <div class="main"> <div class="box">我是滚动区域~~</div> <div class="box">我是滚动区域~~</div> <div class=".
android 实现数字滑动，中间大，两边小，滑动的过程中，是逐渐变小
qq_36570506的博客
12-10 882
android 实现数字滑动，中间大，两边小，滑动的过程中，是逐渐变小
HarmonyOS 实战开发 —— 基于Swiper的页面布局
CTrup的博客
11-28 405
1.给Swiper组件设置.nextMargin(50).prevMargin(50)属性。2.给Swiper组件添加onChange事件，设置当前this.currentIndex=index，当currentIndex为首页或者尾页时，设置上一张以及下一张图片的缩放值。// 设置当前index缩放值为最大值// 当前index=0时，设置上一张图片的缩放值} else// 当前index不为0时，设置上一张图片的缩放值// 当index为最后一张图片时，设置下一张图片的缩放值。
Android中约束布局工具栏,约束布局
weixin_28795851的博客
05-26 1015
约束布局(ContraintLayout)是相对布局的升级版，配合最新的布局编辑器1Android Studio从2.3版本开始在布局编辑器中支持约束布局，写作本书时Android Studio 2.3已经发布，创建界面的默认布局管理器已经变为约束布局。(Layout Editor)，约束布局堪称布局神器，完全不需要嵌套布局，只在布局编辑器中拖拖拉拉即可完成非常复杂的界面布局。不过，第一次使用约束...
【鸿蒙开发实战篇】详细介绍ArkUI中线性布局，层叠布局和弹性布局
HarmonyOS_001的博客
07-02 1173
三个布局组件讲完了，篇幅还是蛮大的，其实看过鸿蒙开发者官方文档的人应该也都发现了，本篇文章知识点的讲解顺序就是按照官方文档来的，看了每个知识点，然后分别手写下对应的demo和自己的理解，后面其他布局组件都也会以这种方式讲解，枯燥是枯燥了点，但相比于仅仅是看文档来说，这才是最有效的掌握知识点的方法。
flex布局实现上下固定，中间滑动的布局方式
宋坚强大大~~
02-20 8495
例如这样的一个页面，希望有个头图，有个底部的底栏，中部内容区域可滑动。 简单介绍一下如何实现： 固定头部和尾部，中间部分可滑动，使用flex布局 1.设置html，body高度为100% 2.设置最外层div的布局方式为弹性布局display:flex; 3.设置最外层div的主轴方向为flex-direction: column;主轴为垂直方向，起点在上...
LayUI
记录学习历程
08-25 2542
LayUI 1、LaUI的安装及使用 1.1、LayUI的介绍 layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。 由国人开发，16年出厂的框架，其主要提供了很多好看、方便的样式，并且基本拿来即用，和Bootstrap有些相似，但该框架有个极大的好处就是定义了很多前后端交互的样式接口，如分页表格，只需在前端配置好接口，后端则按照定义好的接口规则返回数据，即可完成页面的展示，极大减少了后端人员的开
flex 实现移动端上下固定，中间滑动
weixin_43297321的博客
08-01 1857
如果你还在用position:fixed来保持移动端顶部、下部的导航栏在全局固定位置不动。 那你可以换种方法。更简单，方便，快捷；还不会受定位的影响。 大师兄飞速写完的flex移动端布局小栗子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-
上下固定，中间滚动布局如何实现
jean_0920的博客
09-19 1907
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
flex上下固定中间占固定高度（中间左右菜单）且内容自动滚动
qq_42103673的博客
04-18 361
flex上下固定中间占剩余高度（中间左右菜单）且内容自动滚动。
layui页面的自动上下滚动
qq_39162838的博客
05-29 3807
核心代码 /* 滚动条自动上下滚动 */ scrollBar(); function scrollBar() { var height = $('.layui-table-body').height(); var number = 0; var length = 0; var time = setInter
微信小程序上下滚动的方法
热门推荐
robin_sky的博客
11-14 1万+
1、不使用scroll-view组件 1、查看自己代码中page的属性 如果你的page样式中含有overflow属性，且属性值为hidden，将其去掉，若去不掉则加入下代码： page { overflow-y: auto !important; } 2、查看自己的顶级盒子view的样式 若 样式中含有display属性，且属性值为flex，将其去掉即可 2、使...
ugui 中间大两边小的滑动
07-04
在UGUI中，可以通过设置滑动条的大小和位置来实现中间大两边小的滑动效果。 首先，我们可以通过在Scene场景中创建一个空的Canvas对象来添加UI元素。然后在Canvas上创建一个Image对象，作为滑动条的背景。可以通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值