测试的时候发现，在选择模板、选择产品第二步第三步的时候。如果超出两行的话会盖住看不见，（因为高度所有统一都被写死了，又加了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的应用

vue项目 菜单侧边栏随着右侧内容盒子的高度实时变化的更多相关文章

  1. layui实现左侧菜单点击右侧内容区显示

    https://segmentfault.com/a/1190000014617129

  2. Vue项目中，要保证某个部分的高度，应该怎么设置

    .icons overflow: hidden height: padding-bottom: % background: green

  3. 《Asp.Net Core3 + Vue3入坑教程》 - Vue 1.使用vue-cli创建vue项目

    简介 <Asp.Net Core3 + Vue3入坑教程> 此教程适合新手入门或者前后端分离尝试者.可以根据图文一步一步进操作编码也可以选择直接查看源码.每一篇文章都有对应的源码 目录 & ...

  4. C# WPF 左侧菜单右侧内容布局效果实现

    原文:C# WPF 左侧菜单右侧内容布局效果实现 我们要做的效果是这样的,左侧是可折叠的菜单栏,右侧是内容区域,点击左侧的菜单项右侧内容区域则相应地切换. wpf实现的话,我的办法是用一个tabcon ...

  5. VUE项目二级菜单刷新时404 nginx

    原因:vue项目的路径时虚拟路径,并不存在,所以用nginx去请求请求不到,所以vue项目做了两部调整: 1.所有的请求后端接口地址前端写死 2.nginx里把所有的接口转发后端删掉,并添加以下内容 ...

  6. vue项目导航菜单实现

    vue项目导航菜单问题 目标:横向菜单点击跳转,颜色变换,刷新可保持状态 // 模板template中通过循环菜单列表生成,动态类名改变颜色 <li v-for="(item, ind ...

  7. element-ui和npm、webpack、vue-cli搭建Vue项目

    一.element-ui的简单使用 1.安装 1. npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i element-ui -S 2. CDN ...

  8. python 全栈开发，Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

  9. Vue项目开发相关问题总结

    Vue项目开发相关问题总结 一.创建一个项目(两种方式) 1.通过CLI命令行创建,具体步骤如下: (1)Node 版本要求 Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11 ...

随机推荐

  1. DFS&&BFS

    DFS DFS搜索是按照深度的方向搜索,它类似于树的先根遍历,是树的先根遍历的推广. 1.从图的某个顶点v0出发,首先访问v0, 2.找出刚访问过的顶点的第一个未被访问过的邻接点,然后访问该结点,以该 ...

  2. jvm jconsole

    JAVA_OPTS="$JAVA_OPTS -Dcom.sun.management.jmxremote.port=60001 -Djava.rmi.server.hostname=192. ...

  3. opensuse下配置IP、DNS、GATEWAY

    本人物理主机IP描述 IPv4 地址 . . . . . . . . . . . . : 192.168.1.101(首选)子网掩码  . . . . . . . . . . . . : 255.25 ...

  4. bom知识点

    1.BOM输出 所谓BOM指的是浏览器对象模型 Browser Object Model,它的核心就是浏览器 alert(1);//弹出框 调式使用 console.log('路飞学城');//用于浏 ...

  5. java程序调优系列（一）intern()代替equal()

    1. 首先String不属于8种基本数据类型,String是一个对象. 因为对象的默认值是null,所以String的默认值也是null:但它又是一种特殊的对象,有其它对象没有的一些特性. 2. ne ...

  6. C# 窗体常用API函数 应用程序窗体查找

    常用的处理窗体的API函数如下(注意:API函数必须放在窗体中...): 使用C#语言,要引用DllImport,必须要添加using System.Runtime.InteropServices命名 ...

  7. controller 允许跨域访问

    1.在controller 上加上 @CrossOrigin(origins = {"http://localhost:7777", "http://someserver ...

  8. leetcode232

    public class MyQueue { Stack<int> S = new Stack<int>(); /** Initialize your data structu ...

  9. php导出数组到csv格式demo

    php的二维数组导出到csv需要处理文字编码,代码如下 <?php $data=array( array("username"=>"test1",& ...

  10. 2017面向对象程序设计（Java）第十五周学习总结

    上周,老师要求同学们自学应用程序部署,并布置了相关的实验任务.此次实验的目的是掌握Java应用程序的打包操作:了解应用程序存储配置信息的两种方法: 了解Applet小应用程序的开发及应用方法:掌握基于 ...