css flex左右布局，左右如何同高？-灵析社区
时光旅人css flex 布局，页面分为上下两部分，下面通过 flex: 1; 撑开，并且 overflow-y: auto；下面又分为左右布局，左右高度不一定，想要设置一个边框分割左右，但是边框始终到最底部； 下半部分左右边框高度能够到自动撑开的高度  [https://codesandbox.io/p/devbox/flexbu-ju-zi-dong-cheng-gao-8...](https://link.segmentfault.com/?enc=M2Dy5rshkUo3NT2kKMKH9A%3D%3D.zncmZXY%2FvXvjNVfcxhKlyUSt%2B5TIi65OlujzIMpuEfazrYhkU1tvUZx9CHauBzem4Pv6cPBhDkZE6njw9Qq2buoReIhCImISZUbtzHJChAuHC47toU%2FXgmDI3u%2BuGsQH)
七安前基于当前结构的方法:
给".rht"和".lft"盒子添加:
.rht {
height: min-content;
}
这样这个弹性盒子就会被子盒子内容撑开
然后使用JQuery 获取"rht"的高度赋值给".lft"的子盒子"div":
let h = $(".rht").height() + 'px';
$(".lft div").css({
height: h
});
使用新的结构实现
Document
* {
padding: 0;
border: 0;
margin: 0;
}
html,
body,
.wrapper {
height: 100%;
}
.top {
height: 100px;
width: 100%;
background: #e3e3e3;
position: fixed;
top: 0;
}
.top2 {
height: 100px;
width: 100%;
background: #e3e3e3;
}
.content {
display: flex;
height: 100%;
height: min-content;
}
.lft {
flex: 1;
}
.rht {
width: 600px;
flex-shrink: 0;
border-left: 1px solid red;
height: min-content;
background: red;
}
nav
lft
rht 1
rht 2
rht 3
rht 4
rht 5
rht 6