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;

}
相关推荐
Myli_ing1 小时前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
dr李四维1 小时前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
雯0609~1 小时前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ1 小时前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z2 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
彭世瑜2 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4042 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish2 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five2 小时前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序2 小时前
vue3 封装request请求
java·前端·typescript·vue