左侧菜单高度自适应右侧内容
CSS样式:
1 .content{ 2 display: flex ; 3 } 4 .left_sidebar{ 5 flex:1; 6 float: left; 7 background: #0E90D2; 8 z-index: -1; 9 width: 10vw; 10 font-size: 1rem; 11 color: #fff; 12 overflow:hidden; 13 } 14 .right_content{ 15 width: 88vw; 16 float: right; 17 flex: none; 18 background: #00B0CF; 19 height: 30vw; 20 }
html:
1 <div class="content"> 2 <div class="left_sidebar">左侧菜单</div> 3 <div class="right_content">右侧内容</div> 4 </div>
效果图: