如上图,如何使红色的view高度加上灰色或者蓝色的高度等于绿色的高度呢?
红色占比20%,蓝色/灰色一边高,占比80%。谢谢。
wxml
<view class="container">
<view class="topArea">
<scroll-view scroll-y class="leftMenu" type="list">
</scroll-view>
<scroll-view class="rightContent" scroll-y type="list">
</scroll-view>
</view>
<view class="bottomArea">
</view>
</view>
wxss
page {
height: 100vh;
}
.container {
display: flex;
height: 100%;
background-color: #00ff00;
}
.topArea {
height: 80%;
width: 100%;
display: flex;
flex-direction: row;
}
.bottomArea {
height: 20%;
width: 100%;
background-color: red;
}
.leftMenu {
height: 100%;
width: 25%;
background-color: #eeeeee;
}
.rightContent {
height: 100%;
width: 75%;
background-color: #0000ff;
}
最终找到了问题所在,
<view class="container">
和全局的 app.wxss的冲突了!改名字即可!!!!
.container{ width:100vw; height:100vh; .gray{ widht:100%; height:80%; } .red{ widht:100%; height:20%; } }
相对定位,positon:absolute
position:absolute;
left:0;
top:0;
height: 100%;
width: 100%;
display: flex;
flex-direction: row;
}
position:absolute;
left:0;
top:0;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}