前言：
此时同学们对“div高度自适应屏幕高度”都比较重视，朋友们都需要了解一些“div高度自适应屏幕高度”的相关资讯。那么小编也在网摘上收集了一些关于“div高度自适应屏幕高度””的相关资讯，希望我们能喜欢，各位老铁们一起来了解一下吧！看下效果图先：
一、三栏布局，中栏自适应宽度很简单，关键点：
父元素设置 display: flex; 左右2栏确定宽度（数值/百分比）中间栏设置 flex:1;如果要布局好点，左右2栏可以靠边排，父元素设置 justify-content: space-between;
二、而子元素要占满剩余高度的css关键点：
父元素要设置 display: flex;父元素的主轴方向设置为纵向从上往下排列 flex-direction: column; 父元素的高度能确定，不管是定高（height: 500px;），还是 100% 其父元素的高度。或者是由其余元素可以确定整体文档高度的都可以。需要占满剩余高度的子元素，设置 flex:1;
html例子：
<div id="app"> <div class="flex_between demo"> <div class="l1"> <div class="box box-1">1-1</div> </div> <div class="l2"> <div class="box box-1">2-1</div> <div class="box box-2"> <div class="hd">2-2</div> <div class="list myscroll"> <p v-for="i in 100">{{ i }}</p> </div> </div> </div> <div class="l3"> <div class="box box-1">3-1</div> <div class="box box-2">3-2</div> <div class="box box-3">3-3</div> </div> </div> </div>CSS例子：
<style>body { margin: 0; padding: 10px; background: #eee; }.flex_between { display: flex; justify-content: space-between; }.box { background: #fff; box-sizing: border-box; margin-bottom: 10px; text-align: center; font-size: 50px; }.box:last-child { margin-bottom: 0; }.demo .l1, .demo .l3 { width: 300px; }.demo .l2 { flex: 1; margin: 0 10px; }.demo .l1 { display: flex; flex-direction: column; }.demo .l1 .box-1 { flex: 1; }.demo .l2 .box-1 { height: 100px; }.demo .l2 .box-2 .hd { height: 60px; }.demo .l2 .list { height: calc(100vh - 190px); min-height: 300px; overflow-y: auto; font-size: 20px; }.demo .l3 { display: flex; flex-direction: column; }.demo .l3 .box-1 { height: 100px; }.demo .l3 .box-2 { height: 200px; }.demo .l3 .box-3 { flex: 1; }</style>详细文档&代码demo，可查看：
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #div高度自适应屏幕高度 #css找子元素的父元素 #css设置元素宽度和高度 #css设置宽度不生效 #自适应宽度用到的css属性是
