zoukankan      html  css  js  c++  java
  • vue项目 菜单侧边栏随着右侧内容盒子的高度实时变化

    测试的时候发现,在选择模板、选择产品第二步第三步的时候。如果超出两行的话会盖住看不见,(因为高度所有统一都被写死了,又加了overflow~emmm~)所以要改成走马灯形式。如图:

     

    那么问题来了,我步骤1选择产品和步骤2选择模板是同一个页面,只是父元素下的dom修改了而已。侧边栏是需要跟着右侧内容盒子高度进行变化,现在要修改同一个页面下的步骤1和步骤2的内容盒子高度,同时使左侧菜单栏高度实时变化.

    也叫分栏高度自动相等

    完成效果:

    高度750px;

     

    高度1048px;

     

    首先,把当前页面写死的高度修改:

    包裹左侧菜单栏和右侧内容盒子的父元素:parentBox  添加overflow:hidden; zoom:1;

    左侧菜单栏:height:auto;margin-bottom:-900px; padding-bottom:900px;(此处大小可按照实际情况设置多大)

    右侧内容盒子:height:100%;

    以上的处理方式只适合像我这种左侧比较少操作的菜单栏,因为不确定一些骚操作会不会出现特殊的bug。目前来看我这边的话是没有出现。

    最后,display:table-cell;的方法也是可以进行处理这种状态的。推荐关于display:table-cell等高布局的大神博客:

    我所知道的几种display:table-cell的应用

  • 相关阅读:
    币值转换
    第八周作业
    第七周作业
    第五周编程总结
    第四周编程总结
    第三周编程总结
    7-1 查找整数
    7-2 求最大值及其下标
    秋季学习总结
    对我影响最大的三个老师
  • 原文地址:https://www.cnblogs.com/web1/p/9013767.html
Copyright © 2011-2022 走看看