|
没点击的时候
点击完后的样子：
代码：
<template>
<div class="app">
<div class="box" >
<div class="box1"
:style="{height : isTrue ? '200px':'auto'}"
@click="clickButton"
>
box1
</div>
<div class="box2">box2</div>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data(){
return {
isTrue:true
}
},
methods:{
clickButton(){
this.isTrue = ! this.isTrue
}
}
}
</script>
<style lang="less" scoped>
.box{
display: flex;
width: 100%;
/*height: 100%;*/
height: 100vh;
flex-direction: column;
background-color: yellow;
.box1{
width: 100%;
background-color:deeppink;
}
.box2{
width: 100%;
flex: auto;
background-color: green;
}
}
</style>
做成这个需要有三个前提条件
1、父盒子(box)要设置 display: flex; flex-direction: column;前两个固定的 height: 100vh;高度必须设置
2、子盒子1(box1)高度必须是根据条件判断必须包括一个定高，一个auto
3、子盒子2(box2)必须设置flex为auto
| 
转播
