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;

}
相关推荐
MariaH27 分钟前
git rebase的使用
前端
_柳青杨27 分钟前
深入理解 JavaScript 事件循环
前端·javascript
阡陌Jony28 分钟前
关于前端性能优化的一些问题:
前端
用户600071819101 小时前
【翻译】简化 TSRX
前端
IT乐手2 小时前
佛德角逼平西班牙,国足还有啥借口?
前端
JustHappy3 小时前
我汇总了身边朋友的经历才发现,其实第一份实习是最难找的......
前端·后端·面试
星栈3 小时前
Dioxus 的响应式系统:`Signal`、`Memo`、`Effect` 和异步状态到底该怎么分工
前端·前端框架
yingyima3 小时前
Java 正则表达式:比你想象的更强大
前端
yuanyxh6 小时前
macOS 应用 - 纯对话生成
前端·macos·ai编程
大家的林语冰6 小时前
ES5 凉凉,Babel 8 正式发布,默认不再编译为 ES5 和 CJS......
前端·javascript·前端工程化