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

要实现左侧子元素高度固定,右侧子元素超高滚动加载,并且左侧子元素与父级元素高度一致且不跟随滚动,可以使用CSS的flex布局和overflow属性来实现。
首先,将父级元素设置为flex布局,并将其分为左右两个子元素。左侧子元素设置为固定高度,右侧子元素设置为flex-grow: 1,以占据剩余的空间。
接下来,将右侧子元素设置为overflow: auto,这样当内容超过右侧子元素的高度时,会出现滚动条。
最后,为了使左侧子元素与父级元素高度一致且不跟随滚动,可以使用position: sticky和top: 0来固定左侧子元素在父级元素的顶部。

css 复制代码
.parent {

  display: flex;

}


.left {

  height: 100%;

  width: 200px;

  background-color: #f1f1f1;

  position: sticky;

  top: 0;

}


.right {

  flex-grow: 1;

  overflow: auto;

}
相关推荐
Halo_tjn35 分钟前
基于封装的专项 知识点
java·前端·python·算法
m0_748229993 小时前
Vue2 vs Vue3:核心差异全解析
前端·javascript·vue.js
C澒3 小时前
前端监控系统的最佳实践
前端·安全·运维开发
xiaoxue..3 小时前
React 手写实现的 KeepAlive 组件
前端·javascript·react.js·面试
hhy_smile4 小时前
Class in Python
java·前端·python
小邓吖4 小时前
自己做了一个工具网站
前端·分布式·后端·中间件·架构·golang
南风知我意9574 小时前
【前端面试2】基础面试(杂项)
前端·面试·职场和发展
LJianK15 小时前
BUG: Uncaught Error: [DecimalError] Invalid argument: .0
前端
No Silver Bullet5 小时前
Nginx 内存不足对Web 应用的影响分析
运维·前端·nginx
一起养小猫5 小时前
Flutter for OpenHarmony 实战 表单处理与验证完整指南
android·开发语言·前端·javascript·flutter·harmonyos