zoukankan      html  css  js  c++  java
  • 子组件上下结构布局自适应父组件宽度高度

    1、父级页面

    <template>
      <div>
        <div class="parentDiv">
          <!-- gys-org-navigator 在这里是全局注册组件 -->
          <gys-org-navigator ref="orgNavigator" :org-tree="orgTree" :org-id="orgId" :org-type="orgType" @select="doSelect" />
        </div>
      </div>
    </template>
    <style scoped>
      .parentDiv{
          width: 220px;
          height: 600px;
      }
    </style>
    View Code

    2、子组件页面内容

    css部分内容:

    <template>
      <div>
        <div class="query-search"></div>
        <div class="tree-list-warp-panel"></div>
      </div>
    </template>
    <style scoped>
    .query-search {
        position: relative;
        background: #fff;
        z-index: 9;
    }
    .tree-list-warp-panel {
        position: absolute;
        top: 35px;
        min-height: 50px;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
    }
    </style>
        
    

      

  • 相关阅读:
    miragejs 学习
    json-server学习
    react-redux
    webpack4知识汇总2
    webpack4知识汇总1
    vue跳转当前页面
    redux初识
    react知识补漏2
    vue ssr
    状态码
  • 原文地址:https://www.cnblogs.com/phermis/p/11599257.html
Copyright © 2011-2022 走看看