当前位置:   article > 正文

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

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

要实现左侧子元素高度固定,右侧子元素超高滚动加载,并且左侧子元素与父级元素高度一致且不跟随滚动,可以使用CSS的flex布局和overflow属性来实现。

 首先,将父级元素设置为flex布局,并将其分为左右两个子元素。左侧子元素设置为固定高度,右侧子元素设置为flex-grow: 1,以占据剩余的空间。

接下来,将右侧子元素设置为overflow: auto,这样当内容超过右侧子元素的高度时,会出现滚动条。

最后,为了使左侧子元素与父级元素高度一致且不跟随滚动,可以使用position: sticky和top: 0来固定左侧子元素在父级元素的顶部。

  1. .parent {
  2. display: flex;
  3. }
  4. .left {
  5. height: 100%;
  6. width: 200px;
  7. background-color: #f1f1f1;
  8. position: sticky;
  9. top: 0;
  10. }
  11. .right {
  12. flex-grow: 1;
  13. overflow: auto;
  14. }

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/138025
推荐阅读
相关标签
  

闽ICP备14008679号