UI高度自适应的修改方案-CFANZ编程社区

myspace

蓝湖UI设计图

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

UI高度自适应的修改方案_css

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

UI高度自适应的修改方案_类名_02

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

补充：

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

解决方案Demo

UI高度自适应的修改方案_前端_03

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

html 结构如下

<div class="outer">
    <div class="left">
      <div class="top"></div>
      <div class="bottom"></div>
    </div>
    <div class="right"></div>
  </div>

UI高度自适应的修改方案_css_04

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 组件进行兼容。

最终效果如下

UI高度自适应的修改方案_类名_05

副作用

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

codePage

蓝湖UI设计图

设计图展示划分如下

Header通用
Sider通用
Content自定义

UI高度自适应的修改方案_html_06

Content区域规划

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

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

UI高度自适应的修改方案_类名_07

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

<div class="root">
    <div class="YsBreadcrumb"></div>
    <div class="box">
    </div>
  </div>

Box区域规划

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

Left
Middle
Top
Bottom

UI高度自适应的修改方案_html_08

<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;
    }
  }
}