收藏
回答

如何让两个view的高度之和,占满屏幕的高度?

如上图,如何使红色的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;
}



回答关注问题邀请回答
收藏

4 个回答

  • WillGO
    WillGO
    04-22

    最终找到了问题所在,

    <view class="container">

    和全局的 app.wxss的冲突了!改名字即可!!!!

    04-22
    有用
    回复
  • Vue15sPro Max Plus Ultra 典藏版
    Vue15sPro Max Plus Ultra 典藏版
    04-22
    .container{
    width:100vw;
    height:100vh;
    .gray{
    widht:100%;
    height:80%;
    }
    .red{
    widht:100%;
    height:20%;
    }
    
    }
    


    04-22
    有用
    回复 1
    • WillGO
      WillGO
      04-22
      和我上面的代码没什么区别吧
      04-22
      回复
  • 0
    0
    04-22
    topArea 高设置80vh bottomArea 高20vh
    


    04-22
    有用
    回复 1
    • WillGO
      WillGO
      04-22
      这个不行,没有变化。
      04-22
      回复
  • 一笑皆春
    一笑皆春
    04-22

    相对定位,positon:absolute

    04-22
    有用
    回复 6
    • WillGO
      WillGO
      04-22
      absolute 这个是绝对吧?能具体些吗?新手,谢谢哈
      04-22
      回复
    • 一笑皆春
      一笑皆春
      04-22回复WillGO
      .topArea {
        position:absolute;
        left:0;
        top:0;

        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: row;
      }
      04-22
      回复
    • WillGO
      WillGO
      04-22
      bottomArea跑到上面去了 :(
      04-22
      回复
    • 一笑皆春
      一笑皆春
      04-22回复WillGO
      .topArea {
        position:absolute;
        left:0;
        top:0;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
      }
      04-22
      回复
    • WillGO
      WillGO
      04-22回复一笑皆春
      🤔
      04-22
      回复
    查看更多(1)
登录 后发表内容