上下两端固定,中间随内容自动撑高的H5代码,达到一定高度中间内容出现滚动条_前端实现固定盒子的高度超过的高度为滚动条的位移-程序员宅基地

技术标签: 自动撑高  HTML5  个人  html  

工作上遇到的,感觉比较实用,记录一下

其他前端有趣的例子和坑合集:https://github.com/wqhui/blog
直接预览:预览链接

没超过最大高度不会有滚动条
在这里插入图片描述

内容超过出现滚动条
在这里插入图片描述

	 /* css代码 */
	    .box{
    
        display: flex;
        flex-direction: column;
        width:400px;
        min-height:30vh; /* 保证最小高度 */
        max-height:50vh; /* 保证最大高度,超过该高度中间出现滚动条 */
        border:1px solid red;
    }

        
  .fix{
    
      display: flex;
      flex-grow: 0;
      border:1px solid blue
  }
  .scroll{
    
      display: flex;
      overflow: auto;
  }
    <div class='box' >
            <div class="fix">上面这个是固定的</div>
            <div class='scroll'>前几年,高铁运力不足的时候,某些路局为了缓解客流压力,冒着列车超员报警压死弹簧的安全隐患和列车服务设施过量损耗的风险选择发售无座票让人们能早点回家。但是没人理解铁路人的良苦用心,随之引发的就是社会舆论“强烈要求无座票半价”“黑心铁路有座无座一个票价”以及出现无座票旅客霸占有座票旅客座位的现象、无座票旅客霸占一等座、商务座的现象。铁总这下就怒了,干嘛要做这种吃力不讨好的事,加上运力在这几年越来越充足,一纸下文各个路局禁止发售高铁无座票。________各路局情况不一样,有些路局还是会发售少.前几年,高铁运力不足的时候,某些路局为了缓解客流压力,冒着列车超员报警压死弹簧的安全隐患和列车服务设施过量损耗的风险选择发售无座票让人们能早点回家。但是没人理解铁路人的良苦用心,随之引发的就是社会舆论“强烈要求无座票半价”“黑心铁路有座无座一个票价”以及出现无座票旅客霸占有座票旅客座位的现象、无座票旅客霸占一等座、商务座的现象。铁总这下就怒了,干嘛要做这种吃力不讨好的事,加上运力在这几年越来越充足,一纸下文各个路局禁止发售高铁无座票。________各路局情况不一样,有些路局还是会发售少</div>
            <div class='fix'>下面这个也是固定的</div>
    </div>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/dKnightL/article/details/95214221

智能推荐

UE4动画蓝图 小白人的优化-程序员宅基地

文章浏览阅读100次。UE4动画蓝图 小白人的优化

嵌入式linux系统移植-U-Boot 移植_桃子移植第五驱动-程序员宅基地

文章浏览阅读970次。ubootNXP 官方开发板 uboot 编译测试查找 NXP 官方的开发板默认配置文件编译 NXP 官方开发板对应的 uboot烧写验证与驱动测试正点原子开发手册学习笔记我们就来学习如何将 NXP 官方的 uboot 移植到正点原子的 I.MX6ULL 开发板上,学习如何在 uboot 中添加我们自己的板子。小白自述:本章学习笔记虽然是一步步移植uboot,实际是为了学习在移植过程中能够对uboot源码各个功能有更深入地了解。NXP 官方开发板 uboot 编译测试查找 NXP 官方的开发板默认_桃子移植第五驱动

python 调用钉钉机器人接口案例一则 —— 筑梦之路_钉钉机器人 api-程序员宅基地

文章浏览阅读737次。智能回复:钉钉机器人 API 提供了智能回复功能,可以实现根据用户发送的消息自动回复。开发者可以根据消息内容进行语义分析,并返回合适的回复。钉钉机器人 API 是阿里巴巴旗下钉钉平台提供的一种基于 HTTP 协议的 API 服务,它可以帮助开发者快速构建智能机器人,实现与用户的实时互动和自动回复。消息处理:钉钉机器人 API 提供了消息处理功能,可以实现对用户发送的消息进行接收、解析和回复。钉钉机器人 API 提供了丰富的功能,可以帮助开发者快速构建智能机器人,实现与用户的实时互动和自动回复。_钉钉机器人 api

【PyQt】PyQt学习(一)框架介绍+环境搭建_peaklin脚本pyqt-程序员宅基地

文章浏览阅读1.7k次,点赞4次,收藏22次。本文首先对比了Python的各个GUI库并给出了首推PyQt的原因,其次本文详细介绍了Pycharm的环境搭建,最后本文写了一个简单的PyQt示例,用于入门展示。_peaklin脚本pyqt

高中程序员怼本科程序员:编程不用深奥知识,高中不比你们差_高中编程-程序员宅基地

文章浏览阅读920次。在如今竞争激烈的职场,人才的竞争十分激烈,对于程序员这个岗位来说也是如此。很多的企业把学历当做一个硬性要求,虽说一些大企业看重能力,对学历没什么要求,那是因为一个好的学历更具有培养价值,所以经验丰富的HR都是根据学历来筛选人才,而985.211的更是行业中的火热的争取对象。但是最近就有网友发帖说道,编程用不到太多知识,培训下就会了,写的代码也不会差。对此,有一些网友顿时不乐意了:..._高中编程

unity代码生成圆柱网格并使用曲面细分顶点_unity编写曲面mesh-程序员宅基地

文章浏览阅读442次,点赞9次,收藏11次。unity代码生成圆柱网格_unity编写曲面mesh

随便推点

MySQL加密方式之更改(error 1251)-程序员宅基地

文章浏览阅读475次。caching_sha2_password To mysql_native_passworderror 1251 [Client does not support authentication protocol requested by server; consider upgrading MySQL client]修改权限mysql> ALTER USER 'root'@'%' IDENTIFIED BY 'root' PASSWORD EXPIRE NEVER;Query OK, 0_error 1251

WebStrom配置Less_webstrom less $message未定义-程序员宅基地

文章浏览阅读670次。2018年5月10日 晚9点 亲测可用1、安装软件1)安装node.js(在官网下载v8.11.1,v10配置好后会出现乱码卸载掉装成v8重启下电脑就可以了) 一路next即可,记下安装路径 ,eg:D:\node2)使用node下载less win+R 打开运行窗口,输入cmd,回车打开进入D盘,输入d:进入node安装目录cd D:\node安装lessnpm install -..._webstrom less $message未定义

Python全栈(五)Web安全攻防之7.MySQL注入读写文件和HTTP头中的SQL注入_all tested parameters-程序员宅基地

文章浏览阅读4.4k次,点赞6次,收藏16次。pikachu是一个比较详细的漏洞平台;MySQL读取文件用load_file()函数;写入文件用into outfile。UPDATEXML()函数用于捕捉错误;在user-agent后加入payload进行user-agent注入;通过修改请求头中的referer进行SQL注入测试,可以通过3种方式进行安全测试;在请求头的cookie参数中加入payload‘进行cookie测试;使用Base64加密的注入语句,插入到Cookie对应的位置完成SQL注入漏洞的探测。_all tested parameters

Freertos创建(动态和静态)任务与删除任务,延时函数_freertos中可以既创建动态任务又创建静态任务吗-程序员宅基地

文章浏览阅读360次。FreeRTOS 中,任务的创建有两种方法,一种是使用动态创建,一种是使用静态创建。动态创建时,任务控制块和栈的内存是创建任务时动态分配的,任务删除时,内存可以释放。静态创建时,任务控制块和栈的内存需要事先定义好,是静态的内 存 ,任务删除时 ,内存不能释放。更具需求使用这两种创建方法。_freertos中可以既创建动态任务又创建静态任务吗

量化投资学习-26:最贵的免费与时间的价值_量化投资免费课程-程序员宅基地

文章浏览阅读2.4k次。最近有一个深刻的体会:如果算上时间的成本和回报率,免费的往往是最贵的的我们总喜欢到网站搜各种免费的视频讲课,然后,然后殊不知,很多的免费课程知识普及性的,我们花去了时间,却没有学到精髓。我们总期望买入低成本的股票,美其名曰,价值投资,与主力一起建仓,殊不知,主力的建仓时间很长,主力通过后期拉升的空间换取前期漫长的时间长度。然而对于散户而言,很难坚持坚持下去,即使坚持下去了,我们也无法知道单只股票的底部和顶部到底在哪里,大多数时候,我们在底部上升不久,还没有进入快速拉升阶段,就已经止盈出局,我们漫长的_量化投资免费课程

ECG ×AI: 机器/深度学习的ECG应用入门(5)_深度学习处理ecg是处理图像还是处理数据点-程序员宅基地

文章浏览阅读2w次,点赞23次,收藏77次。深度学习:卷积神经网络(CNN)1.引言上一部分简单介绍了传统机器学习框架在ECG分类领域的基本应用。传统机器学习框架对于人工特征非常依赖,如果算法设计者没有足够经验,很难提取出高质量的特征,这也是传统机器学习框架的局限性。近几年来以卷积神经网络(Convolutional Neural Network,CNN)为代表的深度学习技术蓬勃兴起,其优势在于可以从大数据中自动习得特征而无需人工设计特征,..._深度学习处理ecg是处理图像还是处理数据点

推荐文章

热门文章

相关标签