上下两端固定,中间随内容自动撑高的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

智能推荐

Vue中如何实现ajax请求,VUE中如何发ajax请求-程序员宅基地

文章浏览阅读7.8k次。vue中是推荐使用axios来发送请求的。而且在vue2.0之后也是使用axios来实现发送ajax请求的。1. 安装axios有好几种引用的方式,其中主要包括如下:使用 cdn:使用npm$ npm install axios使用 bower:$ bower install axios使用1.get请求mounted: function() {axios.get('http://www.myca..._vue中ajax请求方式

matlab双闭环绘图,matlab双闭环直流调速系统设计及仿真+电路图-程序员宅基地

文章浏览阅读961次。摘要:本文通过研究闭环调速系统的调节系统设计,来减小超调量的方法,用调节器的选型来进行优化处理,并且讨论了实现设计的不同情况的实验结果,着重介绍了第一种方案。同时在考虑不同驱动电路下的设计情况,分别构成的电路系统的主要特点以及实用性,也结合实际的生产设计情况选择最优的设计方案,联系国内外的研究现状结合自己的设计给出合理的设计,通过工程设计进行实验仿真,通过对不同选型下的参数整定来实现超调的合理范围..._用matlab画出双闭环控制的串级调速系统

Centos7.0 关闭防火墙、更改主机名、SSH免密登录_防火墙虚拟机命令修改名字-程序员宅基地

文章浏览阅读955次。网上看到好多博客,方法繁琐难懂,为了力求简洁,本文主要给出具体的方法与命令,而不会一步步演示。本文所述方法已经在自己的Vmware虚拟机中验证可行。关闭防火墙 与Centos之前的版本不同的是,7.0关闭防火墙的命令如下(root用户输入): systemctl stop firewalld.service #停止firewall systemctl disable firewal_防火墙虚拟机命令修改名字

spring-data-mongo 实现aggregation_spingdata mongo aggregate count-程序员宅基地

文章浏览阅读6.1k次,点赞3次,收藏3次。摘要mongo aggregation是mongo 的一个轻量级的map-reduce框架,可以实现一些count,sum,groupby的聚合。本身的意义就在于减少查询次数,将原本需要客户端的多次查询能够整合到db端的基于pipeline的查询。这样带来的好处就是减少请求数据库次数,坏处就是这个查询占用的数据库内存大,时间查,有可能拖垮其他查询。这个在本篇文章不讨论。概述常用的阶_spingdata mongo aggregate count

网络隔离下的几种数据交换技术比较_acl和网闸的区别-程序员宅基地

文章浏览阅读2.1k次。一、背景网络的物理隔离是很多网络设计者都不愿意的选择,网络上要承载专用的业务,其安全性一定要得到保障。然而网络的建设就是为了互通的,没有数据的共享,网络的作用也缩水了不少,因此网络隔离与数据交换是天生的一对矛盾,如何解决好网络的安全,又方便地实现数据的交换是很多网络安全技术人员在一直探索的。网络要隔离的原因很多,通常说的有下面两点:1、涉密的网络与低密级的网络互联是不安全的,尤其来自不可控制网络上的入侵与攻击是无法定位管理的。互联网是世界级的网络,也是安全上难以..._acl和网闸的区别

FLUENT Meshing Watertight Geometry工作流入门 - 1 添加局部尺寸控制_fluent meshing局部尺寸控制-程序员宅基地

文章浏览阅读1.8k次,点赞22次,收藏29次。FLUENT Meshing Watertight Geometry工作流入门 - 1 添加局部尺寸控制。本视频中学到的内容:Ansys Fluent Meshing Watertight Geometry Workflow的基本流程导入几何任务以及Watertight Geometry Workflow的几何要求添加局部尺寸任务以及其中的边缘、面和体尺寸控制类型_fluent meshing局部尺寸控制

随便推点

横向移动之IPC&WMI&SMB&CrackMapExec密码喷射_横向移动cme-程序员宅基地

文章浏览阅读391次。IPC攻击流程:建立ipc$连接 --> copy命令上传后门文件 --> at命令计划任务执行后门文件,上线WMI&SMB攻击流程:抓取账号密码(需提权) --> 将后门放到web根目录下 -->套件或工具进行横向移动,执行命令下载web下的后门文件然后执行,上线CME工具:进行密码喷射,利用smb服务进行批量验证账密,执行命令下载后门然后执行,上线。_横向移动cme

单目深度估计梳理(2) -- 多任务篇_深度估计图像任务-程序员宅基地

文章浏览阅读229次。本文详细梳理了多任务单目深度估计的论文!_深度估计图像任务

(超详细的Centos7安装指南)一步一步安装Centos7操作说明_centos-7-x86_64-dvd-1804.iso-程序员宅基地

文章浏览阅读9.2k次,点赞9次,收藏90次。下载Centos7镜像下载地址Index of /pub/Linux/CentOS-vault/7.5.1804/isos/x86_64 (jaist.ac.jp)http://ftp.jaist.ac.jp/pub/Linux/CentOS-vault/7.5.1804/isos/x86_64/下载镜像包CentOS-7-x86_64-DVD-1804.iso设置虚拟机新建虚拟机弹出新建虚拟机向导,点击下一步选择稍后安装操作系统,点击下一步..._centos-7-x86_64-dvd-1804.iso

关于在IOS平台下使用ARFoundation+UnityWebRequest无响应的解决方法_unitywebrequestmodule ios无效-程序员宅基地

文章浏览阅读3.4k次。最近发现unity在ios平台使用UnityWebRequest会偶尔出现无响应的情况,明明发送了webRequest请求但一直卡住在请求的协程或者开异步进程的请求中,不会继续执行下去。而且这个问题只会在ios出现,在android或者pc平台是复现不了,一开始以为是自己代码的原因,但把请求从头到尾都debug输出过一遍后,发现代码是没错的,但web请求偶尔还是会卡住,即使设置了超时时间也一样。而且只要一出现这种情况,之后的webrequest请求都会卡在同一个地方。附上代码:public asy_unitywebrequestmodule ios无效

android 自学资料_安卓学习文档-程序员宅基地

文章浏览阅读1.0k次。android 面试资料整理_安卓学习文档

基于Java的旅社客房收费管理系统的设计与实现(源码+lw+部署文档+讲解等)-程序员宅基地

文章浏览阅读811次,点赞20次,收藏23次。博主介绍:全网粉丝10W+,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战精彩专栏 推荐订阅2023-2024年最值得选的微信小程序毕业设计选题大全:100个热门选题推荐2023-2024年最值得选的Java毕业设计选题大全:500个热门选题推荐Java精品实战案例《500套》微信小程序项目精品案例《500套》文末获取源码+数据库。