vue 页面分成左右两部分

<template><div class="left-bar"> </div><div class="right-bar"> </div></template><style lang='postcss'>.left-bar {float: left;width: 20%;height: 100%;position:

Liber_Y

14268人浏览 · 2022-05-07 11:13:58

Liber_Y · 2022-05-07 11:13:58 发布

<template>
    <div class="left-bar"> 
        <div></div>
    </div>
    <div class="right-bar">
        <div></div>
    </div>
</template>

<style lang='postcss'>
.left-bar {
  float: left;
  width: 20%;
  height: 100%;
  position: absolute;
  overflow: auto;
}
.right-bar {
  margin-top: -190px;
  float: right;
  right: 0px;
  width: 50%;
  height: 100%;
  position: absolute;
  overflow: auto;
}
</style>

上面是第一种方法：当在dialog组件使用时，有个不友好的地方，就是left-bar新增一个div时，就要根据实际情况调整right-bar中的margin-top数值

第二种方法，使用flex更加友好，使用更方便

<template>
  <div class="box">
    <div title="左" style="background-color: rgb(121, 56, 106)"></div>
    <div title="右" style="background-color: rgb(57, 107, 179)"></div>
  </div>
</template>
<script>
</script>

<style lang='postcss'>
.box {
  width: 100%;
  height: 22px;
  display: flex;
  flex-direction: row;
}
.box > div {
  height: 22px;
  flex: 1;
}
</style>

height为具体数值，可能用于主页面当中，比较合适（这个暂未验证）

如果是在dialog组件当中使用页面左右均分，把height调整为100%