在vue中使用flex,上中下结构（中间高度自适应）遇到的坑

最新推荐文章于 2023-10-04 15:59:06 发布
最新推荐文章于 2023-10-04 15:59:06 发布
阅读量2.1k 收藏
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhai_15733218875/article/details/103780921
版权

项目中的页面需要 上中下结构（中间高度自适应）
因此决定用flex布局实现

中间布局需要使用elementui table组件

在电脑火狐浏览器上遇到了表格不自适应的问题

找了半天

最终解决方法是把表格使用absolute
表格的父元素加一个relative就可以了

萌新不会永远是萌新
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-layout-diy:基于vue和flex的自定义布局
05-16
vue-layout-diy 基于vue和flex的自定义布局，。 S前缀为Sunflower简写，我们团队的命名空间。 项目步骤 使用vue-cli@2.9.3初始化项目； vue init webpack vue-layout-diy 根据个人/团队代码规范，配置eslint； 安装； 完成基于flex布局的组件SGrid SGridItem； 引入Element，完成SEmpty默认显示块； 异步组件配合代码分离时: 若使用插件的形式，s-empty在dev模式下渲染正常，在buid模式下无法渲染。 在main.js中通过Vue.component直接注册则正常。 为了方便在GithubPage展示效果，将build后dist中的结果拷贝至demo目录，并修改资源路径。 由于demo并非部署在Web服务器根目录下，所以分离的异步js文件找不到。 需要修改config/inde
Axios和vue3自适应布局方案
09-04
在本文中，我们将深入探讨如何在Vue3项目中结合Axios实现数据交互，并采用Element-Plus库进行自适应布局设计。同时，我们还将讨论如何利用Mock数据和Vue Router来优化开发流程。 首先，Vue3是Vue.js框架的最新版本...
vue项目开发
weixin_44939146的博客
07-07 131
页面分为两个个部分1、头部2、菜单+显示区stylebackgroundrgb245245245;height70px
Vue学习之页面上中下三层布局
最新发布
hcyxsh的博客
10-04 1183
页面布局：头部，内容区，尾部，其中头部和尾部几乎所有页面都有，可抽成公共组件，内容区是可变的，由路由组件展示。// console.log("app组件展示获取的数据",res);创建应用实例并挂载到挂载点上，使用组件。
Vue项目 关于flex布局（详解）
Jiang_bug的博客
03-31 9084
Flet布局 语法（Flex 指定容器 —父元素） 首先我们需要一个总盒 注意：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。 <template> <div class="box"> <div class="item"></div> </div> </template> <style scoped> .box{ // 将box指定为Flex
Vue项目实现自适应的左右布局和上下布局
m0_74069684的博客
06-07 5374
能看懂的小伙伴直接拿走代码，稍有疑惑的伙伴请听我解释一下，我们这里是通过行标签将需要上下布局的盒子包裹起来，然后通过列标签把列的空间分成24等份，在继续通过使用两个的方式实现上下布局。能看懂代码的小伙伴直接使用代码，稍微有些疑惑的小伙伴就来听我解释一下吧，我首先需要设置一个父盒子来包裹两个子盒子，在父盒子中设置flex布局，使用flex布局就能实现左右布局。
flex实现上中下布局
qq_39851888的博客
04-20 1万+
上中下、上下布局是我们网页开发中常用的布局，下面我将用flex实现这两种布局。 上中下布局 特点： 头尾固定，内容自适应 思路： 整个盒子为layout，使用flex纵向排列，宽高为100%；header和footer均为flex-shrink: 0;，强制不缩放。main的flex-grow: 2;，默认放大，且自动滚动。经过以上操作，就实现了经典是上中下布局。 布局 <div id="layout"> <header id="header">这里是头部</heade
VUE-flex布局之flex-wrap换行（3）
LzzMandy的博客
06-10 8937
1、外部容器display：flex； 可以设置的6个属性，如下： flex-direction 元素排列方向 flex-direction: row || row-reverse || column || column-reverse 元素排列方向: (从左往右)默认 || (从右往左) || (从上往下...
Vue 自适应高度表格的实现方法
11-20
前言 示例版本为 Element-ui 2.13.1 + Vue 2.6.11 本人是做后台开发的，由于公司业务要求需要将前后台模块进行分离，两年...Element-UI 中的 el-table 提供了设置高度的选项，在代码中设置 height 属性就可以现在表格
如何设置iframe高度自适应在跨域情况下的可用方法
09-05
然而，当涉及到iframe的高度自适应时，如果子页面与父页面不在同一个域名下，就会出现JavaScript跨域问题，导致父页面无法直接获取子页面的高度信息。解决这个问题有多种策略，以下是一些常用的方法： 1. **...
多个按钮单选/多选，高度自适应
07-09
使用 `display: flex` 和 `flex-wrap: wrap` 属性，可以确保按钮在一行内显示不下时自动换行。 对于“属性可自行修改”，这意味着开发者应提供足够的灵活性，允许根据项目需求定制按钮的样式、行为和响应式特性。...
vue中实现拖动调整左右两侧div的宽度的示例代码
01-19
最近在使用vue的时候，遇到一个需求，实现左右div可通过中间部分拖拽调整宽度，类似于这样 这是我最终的实现效果 还是老话，因为我不是专业的前端工程师，只是兼职写一些简单的前端，所以这个功能的实现得益于以下...
vue 上下拖动 自适应布局
jqbbbbbbbbb的博客
08-31 996
<template> <div class="DragLayoutBox" ref="box"> <div v-if="$slots.top" :style="topstyle" class="toptombox" ref="topDom"> <slot name="top"></slot> </div> <div id="line" ref="moveDom" class="dragLi.
详解前端开发之flex布局(附代码及演示效果)
CreatorRay的博客
07-20 1430
我们在进行微信小程序的开发时，基本都需要对页面进行布局，布局方式有很多，flex布局可以基本解决我们所有的需求，并且简单易学。 flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 flex布局的核心就是在容器内，默认存在两个轴，一个是水平的主轴，一个是垂直的交叉轴，支撑起整个容器。 任何一个容器都可以指定为 flex 布局。 .body { display: flex; } 这样我们就对容器进行了flex类型布局的设定 flex布局的重要属性有： fl
使vue组件居中、中下
qq_42243957的博客
08-04 1万+
position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%);
前端vue实现圣杯布局【flex布局、浮动布局】
在写作的路上持续输出。
06-26 1273
前端实现圣杯布局【常用的两种方案】一🚀
flex佈局之：上下，上中下，左右，左中右佈局
weixin_44763169的博客
12-08 1213
關於flex的上中下和左中右佈局技巧
flex伸缩布局实现两边对齐，内容上下居中
努力学习中
05-16 1894
1：伸缩布局内部的内容实现两边对齐，上下居中。 display:flex; justify-content:space-between; align-item:center;//上下内容居中
vuex报错 unknown mutation type
热门推荐
萌新不会永远是萌新的博客
03-22 8万+
关于这个报错 是由于自己马虎造成的，并且找了一上午的错才发现- 呜呜呜 我的代码是这样写的 es6对象扩展里有写到 对象里面属性或者方法是可以简写的 ， 所以如果按照我之前的代码 即是 但是vuex并没有mutioins选项，所以导致代码报错了(这个也是我自己的手误写错了的–) 所以看到这里 错误怎么改正已经很明显了 就是 把mutioins 改成 mutation 就好了...
datav在vue中使用自适应 在全屏状态下内容会移除
07-09
通过在Vue组件中定义响应式的数据，并在模板中使用这些数据来控制布局和样式，可以实现自适应效果。确保在组件中正确处理数据的变化，并在模板中使用条件渲染或动态绑定来适应不同屏幕尺寸。 3. 检查组件代码和CSS...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值