css-CSS实现两栏布局，左侧固定宽高，右侧超高滚动加载_游戏逆向|游戏安全|yxfzedu.com

【css-CSS实现两栏布局，左侧固定宽高，右侧超高滚动加载】此文章归类为：["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;

更多【css-CSS实现两栏布局，左侧固定宽高，右侧超高滚动加载】相关视频教程： www.yxfzedu.com

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

相关文章推荐

其他链接

课程目录

技术交流QQ群