UI高度自适应的修改方案

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第18天，点击查看活动详情

myspace

蓝湖UI设计图

整体的布局就是这样一个 Header，一个 sider，还有内容 content，我们要关心的就是 content  区域。

根据设计图 content 区域分成三个容器，A B C

现在是要求 content 区域实现高度响应式，同时 A + B 的高度 和 C 的高度一致。

补充：

• A，B 的宽度可以调整，C 的宽度自适应。
• A 的高度可以调整，B 的高度自适应。

解决方案Demo

这是一个抽象出来的示意图

html 结构如下

<div class="outer">
    <div class="left">
      <div class="top"></div>
      <div class="bottom"></div>
    </div>
    <div class="right"></div>
  </div>
复制代码

css 布局如下，一整个分成左右两个部分， 然后左边的部分再分上下两部分 ，全部使用 flex 做自适应。

.outer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  .left {
    display: flex;
    width: 240px;
    margin-right: 8px;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    .top {
      height: 50%;
      margin-bottom: 8px;
      background-color: #fff;
    }
    .bottom {
      flex: 1;
      background-color: yellow;
    }
  }
  .right {
    flex: 1;
    background-color: #ff33ff;
  }
}
复制代码

真实解决场景

• 按照上面的 html 结构进行重构。
• 可以与当前 row，col 组件进行兼容。

最终效果如下

副作用

由于修改了代码结构，导致部分容器内元素的 CSS 失效，暂时没有查明原因，以及无法预估后续修改的工作量，单就调整 css 来看应该难度不大，但是细节比较多。

codePage

蓝湖UI设计图

设计图展示划分如下

• Header 通用
• Sider 通用
• Content 自定义

Content区域规划

由于面包屑展示形式不一致，计划放在页面单独管理，所以把面包屑放在 Content 区域进行布局，效果如下

• outer 最外层容器
• YsBreadcrumb 面包屑区域
• box 真正内容的区域

Vue2.x 要求每个组件必须有根节点，所以还需要一个 root

  <div class="root">
    <div class="YsBreadcrumb"></div>
    <div class="box">
    </div>
  </div>
复制代码

Box区域规划

box 区域 划分成 左， 中 ，右 三个部分，其中右部分再细分为 上 下 两个部分。

• Left
• Middle
• Top
• Bottom

<template>
  <div class="root">
    <div class="YsBreadcrumb"></div>
    <div class="box">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right">
        <div class="top"></div>
        <div class="bottom"></div>
      </div>
    </div>
  </div>
</template>
复制代码

.root {
  width: 100%;
  height: 100%;
}

.box {
  width: 100%;
  height: 100%;
  height: calc(100% - 48px);
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  .left {
    display: flex;
    margin-right: 8px;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    background: #2f3e59;
  }
  .middle {
    flex: 1;
    background: #2f3e59;
    margin-right: 8px;
    border: 1px solid #fff;
  }
  .right {
    height: 100%;
    display: flex;
    margin-right: 8px;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    .top {
      height: 50%;
      margin-bottom: 8px;
      background: #2f3e59;
    }
    .bottom {
      flex: 1;
      background: #2f3e59;
    }
  }
}
复制代码

真实解决场景

• 因为可以同时兼容 Flex 和 Col，Row 组件，所以对整体结构影响不大
• 需要注意的是每层 dom 结构都需要继承上一级的高度（height：100%）
• 按照设定好的 html 结构对代码进行重构

最终效果如下

动态展示

备注

• 类名为演示用，应适当修改更具语义化
• 由于修改了 dom 结构，需要把背景颜色设置在对应的 div 上
• 颜色当前是写死的，需要在 less 文件中声明共同类名，然后在对应的 dom 节点上添加类名