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;

}

相关推荐

  1. CSS布局实现

    2024-02-20 22:34:03       47 阅读
  2. 实现布局

    2024-02-20 22:34:03       36 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-02-20 22:34:03       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-02-20 22:34:03       106 阅读
  3. 在Django里面运行非项目文件

    2024-02-20 22:34:03       87 阅读
  4. Python语言-面向对象

    2024-02-20 22:34:03       96 阅读

热门阅读

  1. 设计模式7大原则+类图关系

    2024-02-20 22:34:03       48 阅读
  2. 在 SQL Server 中编写函数以获取年加周的字符串

    2024-02-20 22:34:03       44 阅读
  3. 学会自幂数

    2024-02-20 22:34:03       55 阅读
  4. Leetcode 367. Valid Perfect Square

    2024-02-20 22:34:03       45 阅读
  5. Git面试题整理(基本点)

    2024-02-20 22:34:03       44 阅读
  6. centos8安装docker docker compose

    2024-02-20 22:34:03       53 阅读
  7. 用Dockerfile创建PostgreSQL数据库

    2024-02-20 22:34:03       53 阅读
  8. 习题2.3 old bill

    2024-02-20 22:34:03       46 阅读
  9. Python 实现Excel 文件合并

    2024-02-20 22:34:03       67 阅读