赞
踩
要实现左侧子元素高度固定,右侧子元素超高滚动加载,并且左侧子元素与父级元素高度一致且不跟随滚动,可以使用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;
-
- }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。