社区首页 >专栏 >【解决方案】UI高度自适应的修改

【解决方案】UI高度自适应的修改

一尾流莺

发布于 2022-12-10 03:11:49

72900

代码可运行

文章被收录于专栏：一尾流莺学前端一尾流莺学前端

运行总次数：0

代码可运行

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