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

于 2024-07-11 14:47:36 发布
阅读量239 收藏
点赞数 1
分类专栏： css 文章标签： 前端 html css
版权声明：本文为博主原创文章，遵循 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">中间</div>
	<div class="">底部（可以在里面的元素中设置元素高度）</div>
</div>
flex的介绍可以看这里

努力的阿皓
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
flex上下固定中间滚动布局
jgftyfc的博客
01-23 663
flex上下固定中间滚动布局
android 实现数字滑动，中间大，两边小，滑动的过程中，是逐渐变小
qq_36570506的博客
12-10 684
android 实现数字滑动，中间大，两边小，滑动的过程中，是逐渐变小
flex 布局实现固定头部和底部，中间滚动布局
weixin_30332705的博客
04-17 604
关键词：display: flex，flex: 1, overflow-y: scroll; 实现：head 和footer 固定，中间body多了滚动，少了撑满； head和footer宽度根据内容撑起，当然你可以自己设置........ 小二，上代码！ 来喽~~ // html布局 <html> <body> <div class="conta...
flexbox常用布局上下固定，中间滚动
weixin_33937913的博客
08-03 594
&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
flex布局实现上下固定，中间滑动的布局方式
宋坚强大大~~
02-20 8271
例如这样的一个页面，希望有个头图，有个底部的底栏，中部内容区域可滑动。 简单介绍一下如何实现： 固定头部和尾部，中间部分可滑动，使用flex布局 1.设置html，body高度为100% 2.设置最外层div的布局方式为弹性布局display:flex; 3.设置最外层div的主轴方向为flex-direction: column;主轴为垂直方向，起点在上...
flex布局
syh12345_的博客
07-30 209
1.给父容器添加display: flex/inline-flex;属性，即可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式；在item里面使用的任何布局都会失效 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .box{ width: ...
Android中约束布局工具栏,约束布局
weixin_28795851的博客
05-26 935
约束布局(ContraintLayout)是相对布局的升级版，配合最新的布局编辑器1Android Studio从2.3版本开始在布局编辑器中支持约束布局，写作本书时Android Studio 2.3已经发布，创建界面的默认布局管理器已经变为约束布局。(Layout Editor)，约束布局堪称布局神器，完全不需要嵌套布局，只在布局编辑器中拖拖拉拉即可完成非常复杂的界面布局。不过，第一次使用约束...
html区域滚动原理,HTML页面滚动时部分内容位置固定不滚动的实现
weixin_34683262的博客
05-30 1290
本文主要介绍了HTML页面滚动时部分内容位置固定不滚动，对布局有一定的帮助作用，废话不多说，具体如下：效果截图：页面源代码：无标题页我会滚动滚动内容区域滚动内容区域滚动内容区域我不滚动你看我 我不滚动你看我 我不滚动你看我 我不滚动你看我sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss...
CSS:何制作一个向各个方向延展box?
09-27
块级元素（如`<div>`）如果没有指定固定宽度，通常会在垂直方向上延展以容纳其内容。比如一个无序列表`<ul>`，会根据列表项的数量自动调整高度。当用户增大浏览器的字体大小时，这些元素会随之扩大，以保持内容的...
利用VideoView实现播放本地和网络视频，滑动快进快退、滑动调整音量和调整亮度，锁定按钮，分享功能，进度显示，双击暂停等功能
Drogon1999的博客
05-05 5317
温馨提示：        功能比较多且文章也比较长，可在左边菜单栏打开目录按标题查找；        或者按CTRL+F即网页按关键字查找，输入自己需要功能关键字就能跳转到目的地了。    先说明一下，本人大二，就读于一所普通的不能再普通的二本，Android是自学，这个项目自己前前后后花了比较久的时间，因为边学边做，也是磕磕绊绊的过来了，80%原创，20%是邵发的安卓入门视频（http://ww...
页面布局--上下固定中间自适应出现滚动条布局
qq_26702033的博客
03-07 7138
上下固定中间弹性滚动布局是H5页面最常见的布局方法；现在总结了3中布局方式。 1.position:fixed+overflow:scroll+js动态设置中间高度 html代码： //html结构 &lt;nav&gt;&lt;/nav&gt; &lt;div class="container" id="container"&gt; &lt;div class="inner"&am
flex布局实现上下固定，中间自适应
weixin_64105376的博客
08-23 1769
主要是针对上下固定，中间自适应
基于flex弹性布局实现“头尾固定，中间滚动”的页面（纯CSS实现）
热门推荐
qazxbjp2010的博客
02-23 2万+
之前写过一个小项目，首先这个页面布局是这个样子滴，举个栗子，京东的首页： 这算是一种还算常见的页面样式吧，头部和底部固定（或者底部固定没有头、头部固定没有底），有的会用fixed去做，但有在很多手机上会出现很多的奇葩的问题。 思前想后，后来我决定使用弹性布局去做，至少在手机浏览器中都是支持的，虽然写法上可能为了考虑老版本要多谢一些兼容性的无用CSS，配合HTML5 history AP
html页面布局上下左固定-中间内容滚动显示-案例
JackieDYH的博客
07-22 905
代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>全屏</title> <style type="text/css"> *{ margin: 0; padding: 0; } html,body{ width: 100%; height: 100%; background:
使用flex固定头部和底部中间滚动
Keep It Simple, Stupid
08-23 4896
使用flex固定头部和底部中间滚动关键点： * root纵向布局高度充满整个浏览器界面并且隐藏滚动条 * content设置滚动，flex设置1，否则当所有item的高度太小时footer会离开底部 * item设置高度后，必须设置flexShrink为0，否则当所有item高度超过content高度时item会被压缩掉 ‘100vh’浏览器视口高度的百分比，这里是100%； fle
ugui 中间大两边小的滑动
最新发布
07-04
在UGUI中，可以通过设置滑动条的大小和位置来实现中间大两边小的滑动效果。 首先，我们可以通过在Scene场景中创建一个空的Canvas对象来添加UI元素。然后在Canvas上创建一个Image对象，作为滑动条的背景。可以通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值