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;

}
相关推荐
深海鱼在掘金2 分钟前
Next.js从入门到实战保姆级教程(第十四章):性能优化深度实践
前端·typescript·next.js
tiger从容淡定是人生3 分钟前
Selenium与Playwright:两大Web自动化框架的深入对比
前端·selenium·测试工具·自动化·web测试·playwright·信息化战略
好运的阿财8 分钟前
OpenClaw工具拆解之 web_fetch+image_generate
前端·python·机器学习·ai·ai编程·openclaw·openclaw工具
下地种菜小叶17 分钟前
特征定义、特征计算、特征服务怎么配合?一次讲透
java·服务器·前端·数据库·spring cloud
深海鱼在掘金19 分钟前
Next.js从入门到实战保姆级教程(第十三章):从原理到实践深度剖析缓存策略
前端·typescript·next.js
ejinxian21 分钟前
Rust的GUI方案中,Slint、Azul、egui、iced、Druid、Tauri
前端·javascript·vue.js
威迪斯特21 分钟前
Cobra框架:Go语言命令行开发的现代化利器
开发语言·前端·后端·golang·cobra·交互模型·命令行框架
Python私教29 分钟前
ShadcnVueAdmin 的国际化是怎么实现的
前端·javascript·vue.js
㳺三才人子31 分钟前
容器內的 H2 控制台
开发语言·前端·javascript
光影少年1 小时前
vite+rust生态链工具链
开发语言·前端·后端·rust·前端框架