html-两个div,让一个div跟随另外一个div的高度

    在开发的过程中遇到有些场景事这样的,两个div的高度不一致,而且都是动态高度,有的时候div1高,有的时候div2高,如果设置flex的话,那么就会把较矮的元素撑大,但是我想始终都以div1的高度作为基准,div2的高度超出div1的高度则显示滚动条,没有超出就正常显示。

div2的高度超出div1的高度则显示滚动条,没有超出就正常显示
div2的高度超出div1的高度则显示滚动条

  

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>动态高度示例</title><style>.container {display: flex;}.box {width: 100px;background: red;color: white;}#two {width: 200px;position: relative;background: blue;}#two .scrollable-content {position: absolute;top: 0;left: 0;right: 0;bottom: 0;overflow-y: auto;}</style>
</head><body><div class="container"><div class="box" id="one"><p>1</p><p>2</p><p>3</p></div><div class="box" id="two"><div class="scrollable-content"><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p></div></div><div class="box" id="three">Three</div><div class="box" id="four">Four</div></div>
</body></html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/484285.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

知识管理系统|基于springBoot的知识管理系统设计与实现(附项目源码+论文+数据库)

私信或留言即免费送开题报告和任务书&#xff08;可指定任意题目&#xff09; 目录 一、摘要 二、相关技术 三、系统设计 四、数据库设计 五、核心代码 六、论文参考 七、源码获取 一、摘要 随着信息互联网信息的飞速发展&#xff0c;无纸化作业变成了一种趋势…

Kruskal 算法在特定边权重条件下的性能分析及其实现

引言 Kruskal 算法是一种用于求解最小生成树(Minimum Spanning Tree, MST)的经典算法。它通过逐步添加权重最小的边来构建最小生成树,同时确保不会形成环路。在本文中,我们将探讨在特定边权重条件下 Kruskal 算法的性能,并分别给出伪代码和 C 语言实现。特别是,我们将分…

12.2深度学习_视觉处理CNN_池化层、卷积知识

3.池化层 3.1 概述 池化层 (Pooling) 降低维度, 缩减模型大小&#xff0c;提高计算速度. 即: 主要对卷积层学习到的特征图进行下采样&#xff08;SubSampling&#xff09;处理。 池化层主要有两种: 最大池化 max pooling 最大池化是从每个局部区域中选择最大值作为池化后的值…

3D数据大屏实现过程,使用echarts、Next.js

&#x1f4dc; 本文主要内容 数据大屏自适应方案动效 echarts&#xff1a; 3D 立体柱状图动态流光折线图 3D 地球&#xff08;飞线、柱状图&#xff09;无限滚动列表 &#x1f50d; 大屏效果 数据大屏&#xff1a; 点击预览 &#x1f579; 运行条件 next 12.3.4echarts 5.4…

WebRover :一个功能强大的 Python 库,用于从 Web 内容生成高质量的数据集,专为训练大型语言模型和 AI 应用程序而设计。

2024-11-30 &#xff0c;由Area-25团队开发的一个专门用于生成高质量网络内容数据集的Python库。该数据集旨在为大型语言模型&#xff08;LLM&#xff09;和人工智能应用的训练提供丰富的数据资源。 数据集地址&#xff1a;WebRover Dataset|自然语言处理数据集|AI模型训练数据…

FlyHttp 的最佳实践:加速项目级 API 请求构建

FlyHttp的相关文章&#xff1a; FlyHttp 的诞生&#xff1a;从认识各种网络请求开始 FlyHttp 的设计思想&#xff1a;前端 API 自动化构建工具 FlyHttp 的使用&#xff1a;如何高效使用 FlyHttp&#xff0c;支持 JS、TS 项目 一. FlyHttp 是什么&#xff1f; 这是一个自动…

图像修复算法常用评估指标介绍及Python代码(PSNR/SSIM/FID)

目录 峰值信噪比PSNR&#xff08;Peak Signal-to-Noise Ratio&#xff09; 结构相似度SSlM&#xff08;Structural Similarity Index Measurement&#xff09; FID&#xff08;Frchet Inception Distance&#xff09; 代码实践&#xff1a;计算两张图片之间的PSNR和SSIM 代…

家庭财务管理系统的设计与实现ssm小程序+论文源码调试讲解

2系统关键技术 2.1 微信小程序 微信小程序&#xff0c;简称小程序&#xff0c;英文名Mini Program&#xff0c;是一种全新的连接用户与服务的方式&#xff0c;可以快速访问、快速传播&#xff0c;并具有良好的使用体验。 小程序的主要开发语言是JavaScript&#xff0c;它与普…

天润融通亮相CCFA论坛:AI Agent引领零售业服务精细化运营

在新时期实现零售的进化&#xff0c;AI Agent助力客户精细化运营 11月19-21日&#xff0c;CCFA新消费论坛——2024中国零售创新大会在上海召开。大会围绕“在新时期实现零售的进化”主题&#xff0c;通过探讨零售新趋势、新势力、新模式&#xff0c;聚焦新产品、新渠道、新生活…

医学临床机器学习中算法公平性与偏差控制简析

摘要 随着医疗领域中数据的不断积累和计算能力的提升&#xff0c;临床机器学习技术发展迅速&#xff0c;但算法不公平性和偏差问题凸显。本文深入探讨了临床机器学习算法公平性的重要性、概念与定义、在临床应用中的影响、偏差来源、降低偏差方法及提升公平性策略。通过对不同…

如何抓取亚马逊页面动态加载的内容:Python爬虫实践指南

引言 在现代电商领域&#xff0c;数据的重要性不言而喻。亚马逊作为全球领先的电商平台&#xff0c;其页面上动态加载的内容包含了丰富的商品信息。然而&#xff0c;传统的爬虫技术往往难以应对JavaScript动态加载的内容。本文将详细介绍如何使用Python结合Selenium工具来抓取…

MongoDB分片集群架构实战

分片集群架构 分片简介 分片&#xff08;shard&#xff09;是指在将数据进行水平切分之后&#xff0c;将其存储到多个不同的服务器节点上的一种扩展方式。分片在概念上非常类似于应用开发中的“水平分表”。不同的点在于&#xff0c;MongoDB本身就自带了分片管理的能力&#…

opencvocr识别手机摄像头拍摄的指定区域文字,文字符合规则就语音报警

安装python&#xff0c;pycharm&#xff0c;自行安装。 Python下安装OpenCv 2.1 打开cmd,先安装opencv-python pip install opencv-python --user -i https://pypi.tuna.tsinghua.edu.cn/simple2.2 再安装opencv-contrib-python pip install opencv-contrib-python --user …

[报错] Error: PostCSS plugin autoprefixer requires PostCSS 8 问题解决办法

报错&#xff1a;Error: PostCSS plugin autoprefixer requires PostCSS 8 原因&#xff1a;autoprefixer版本过高 解决方案&#xff1a; 降低autoprefixer版本 执行&#xff1a;npm i postcss-loader autoprefixer8.0.0 参考&#xff1a; Error: PostCSS plugin autoprefix…

Go学习:编译器(编写程序时应该注意的点)

一、注意&#xff1a; LiteIDE工具&#xff1a; &#xff08;1&#xff09;创建项目后&#xff0c;同一个目录下的go文件 只能有一个 main函数&#xff0c;如果多个文件都有main函数&#xff0c;会出现编译错误。例如&#xff1a; &#xff08;2&#xff09;如果一个目录下多…

自然语言处理期末试题汇总

建议自己做&#xff0c;写完再来对答案。答案可能存在极小部分错误&#xff0c;不保证一定正确。 一、选择题 1-10、C A D B D B C D A A 11-20、A A A C A B D B B A 21-30、B C C D D A C A C B 31-40、B B B C D A B B A A 41-50、B D B C A B B B B C 51-60、A D D …

市场爆火的“生成式AI大模型”证书如何报考?

随着科技的飞速发展&#xff0c;生成式人工智能正以前所未有的速度渗透到各行各业。从创作艺术、生成音乐到推动虚拟世界的构建&#xff0c;这项技术以其卓越的创新能力改变了传统的生产和创意模式。生成式人工智能不仅仅是数据的复制和再现&#xff0c;而是通过算法实现内容的…

Electron-vue 框架升级 Babel7 并支持electron-preload webapck 4 打包过程记录

前言 我这边一直用的electron-vue框架是基于electron 21版本的&#xff0c;electron 29版本追加了很多新功能&#xff0c;但是这些新功能对开发者不友好&#xff0c;对electron构建出来的软件&#xff0c;使用者更安全&#xff0c;所以&#xff0c;我暂时不想研究electron 29版…

浏览器渲染流程

1.渲染模式 标准模式和怪异模式&#xff08;Quirks Mode&#xff09;是两种不同的文档渲染模式&#xff0c;用于指示浏览器如何解析HTML、CSS等页面内容。标准模式是指浏览器按照W3C规范的流程进行解析和渲染网页&#xff0c;这样可以确保不同浏览器对同一份代码的渲染结果基本…

ElementUI 问题清单

1、form 下面只有一个 input 时回车键刷新页面 原因是触发了表单默认的提交行为&#xff0c;给el-form 加上submit.native.prevent就行了。 <el-form inline submit.native.prevent><el-form-item label"订单号"><el-inputv-model"query.order…