Vue3使用 xx UI解决布局高度自适应

这篇具有很好参考价值的文章主要介绍了Vue3使用 xx UI解决布局高度自适应。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

解决方案

在相应的Sider部分添加:height: ‘91.8vh’,即可。示例:

<Layout>
        <Sider hide-trigger :style="{background: '#fff', height: '91.8vh'}">
}

知识补充

  1. vw、vh、vmin、vmax是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗(Viewport)大小来决定的,单位1,代表类似于 1%。 视窗(Viewport)是你的浏览器实际显示内容的区域—,换句话说是你的不包括工具栏和按钮的网页浏览器
    具体描述如下:
  • vw:视窗宽度的百分比(1vw 代表视窗的宽度为 1%)
  • vh:视窗高度的百分比(1vh 代表视窗的高度为 1%)
  • vmin:取当前Vw和Vh中较小的那一个值
  • vmax:取当前Vw和Vh中较大的那一个值
  1. vh和vw相对于视口的高度和宽度, 1vh 等于1/100的视口高度,1vw 等于1/100的视口宽度,比如:浏览器高度900px,宽度为750px, 1vh=900px/100= 9 px,1vw=750px/100 = 7.5 px, 这样很容易实现与同屏幕等高的框。而我之前使用的height:100%无效。
  2. % 百分比,也是相对长度单位,它是相对于父元素的百分比值。注意,这个%是相对于父元素的,如果你的父元素没有绝对的高度,那么它就可能失效,父元素就没有设置绝对的高度,所以就没有达想要的效果。如果你的元素是随着父容器或者是整体页面布局而改变尺寸,则使用%更好,如元素的高度和宽度设置。
  3. 而设置成height:100vh后,该元素会被撑开屏幕高度一致,所以你会看到上下的滚动条。而如果不像看到滚动条,就要减去页面中上部分HTML元素的高度,就像我下面这个框架中的菜单一样,而只有减去上方HTML元素的高度,才会自适应,这里我设置了一个大概的高度height: 91.8vh;刚好没有滚动条。overflow-y: auto;自动开启滚动条。

拓展知识

最后附上拓展知识:CSS 中px、em、rem、%、vw、vh单位之间的区别详解

px

px就是pixel(像素)的缩写,相对长度单位,相对于屏幕分辨率。

em

参考物是父元素的font-size,具有继承的特点。浏览器默认字体是16px,整个页面内1em不是一个固定的值。字体大小同样都是1.5em,但是效果却截然不同,按照W3C提供的公式,我们可以计算下: class为id1的div字体大小继承自父元素body:16px1.5em = 24px,class为id2的div字体大小继承自父元素id1:24px1.5em = 36px class为id3的div字体大小继承自父元素id2:36px*1.5em = 54px

rem

rem是CSS3新增的一个相对单位,但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

%

% 百分比,相对长度单位,相对于父元素的百分比值元素宽高与字体大小使用区别:

  • 尽量使用相对尺寸单位
    使用相对尺寸单位计量,则在调整页面的布局的时候,不需要遍历所有的内部DOM结构,重新设置内部子元素的尺寸大小。如果是随着父容器或者是整体页面布局而改变尺寸,则使用%更好,如元素的高度和宽度设置。
  • 字体尺寸尽量使用em、rem
    为了字体大小的可维护性和伸缩性,推荐使用em,如果存在3层以及3层以上的字体相对尺寸的设置,可以考虑使用rem。

vw和vh

vw、vh、vmin、vmax是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗(Viewport)大小来决定的,单位 1,代表类似于 1%。 视窗(Viewport)是你的浏览器实际显示内容的区域—,换句话说是你的不包括工具栏和按钮的网页浏览器。
具体描述如下:文章来源地址https://www.toymoban.com/news/detail-766659.html

  • vw:视窗宽度的百分比(1vw 代表视窗的宽度为 1%)
  • vh:视窗高度的百分比
  • vmin:取当前Vw和Vh中较小的那一个值
  • vmax:取当前Vw和Vh中较大的那一个值
  • vh和vw相对于视口的高度和宽度, 1vh 等于1/100的视口高度,1vw 等于1/100的视口宽度,比如:浏览器高度900px,宽度为750px, 1 vh = 900px/100 = 9 px,1vw = 750px/100 = 7.5 px, 很容易实现与同屏幕等高的框。
    **注意:**vw、vh为css3新增的单位,所以在不支持css3的浏览器中是无法实现的,IE8及IE8以下的浏览器不支持,选择性使用。

calc函数可以计算宽度和高度

  • calc()是什么?
    简单来说就是CSS3中新增的一个函数,calculate(计算)的缩写。用于动态计算宽/高,你可以使用calc()给元素的各个属性设置值【margin、border、padding、font-size】等,
  • calc()语法
    calc的语法就是简单的四则运算,
  • 使用“+”、“-”、“*” 和 “/”四则运算;
  • 可以使用百分比、px、em、rem等单位;
  • 可以混合使用各种单位进行计算;
    表达式中有“+”和“-”时,其前后必须要有空格,如:“widht: calc(12%+5em)”,这种没有空格的写法是错误的;
    表达式中有“*”和“/”时,其前后可以没有空格,但建议留有空格。
    calc + vw 计算宽度
width: 800px; 
width: -moz-calc(100vw - (2 * 10)px);

参考

  1. https://blog.51cto.com/u_15760883/5614835

到了这里,关于Vue3使用 xx UI解决布局高度自适应的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Element-UI el-table高度不固定,自适应高度显示滚动条

    表格内容过多时显示滚动条:可通过 max-height设置一个固定的数值高度实现,但是项目中的需求是表格的高度不能写死,要自适应高度来显示滚动

    2024年02月11日
    浏览(58)
  • 解决Vue+Element UI 使用el-aside时菜单栏无法撑起整个侧边栏高度,解决点开菜单栏时有部分突起问题。

    当我们使用element ui 的el-aside时,发现菜单栏无法撑满页面高度的100%  采用css样式设置height:100%的方法也无效 我们将height:100% 改为 height:100vh 即可 效果图如下   点开菜单栏时,我们发现菜单栏右侧会有部分突起 我们给el-menu-item定义一个类名 使用css进行封装即可解决      

    2024年02月11日
    浏览(73)
  • element UI中设置图片的高度并支持PC和手机自适应

    一、elementui 导航菜单栏和Breadcrumb 面包屑关联 二、elementui 左侧导航菜单栏与main区域联动 三、elementui 中设置图片的高度并支持PC和手机自适应 四、elementui 实现一个固定位置的Pagination(分页)组件 在使用Element UI时,可以通过样式覆盖来实现图片的高度在PC和移动端的自适应

    2024年04月13日
    浏览(42)
  • Element UI 中的Table表格组件自定义行高与整个表格自适应高度

    1、:header-row-style=\\\"{height:\\\'30px\\\'}\\\" 设置表格列标题的高度为30像素。 2、:header-cell-style=\\\"{background:\\\'#f5f7fa\\\',padding:\\\'0px\\\'}\\\" 设置表格列标题的背景颜色。 3、:row-style=\\\"{height:\\\'30px\\\'}\\\" 设置每行的高度为30像素。 4、height=\\\"calc(100vh - 150px)\\\" 设置整个表格的高度。因为要自适应所以这个高度要用

    2024年02月12日
    浏览(48)
  • naive-ui ngrid自适应布局

    template     div         n-dividerSelf 响应式/n-divider   n-grid cols=\\\"2 400:4 600:6\\\" responsive=\\\"self\\\"     n-grid-item       div class=\\\"light-green\\\"         1 似乎自适应不好用,       /div     /n-grid-item     n-grid-item       div class=\\\"green\\\"         2       /div     /n-grid-item     n-grid-item       d

    2023年04月15日
    浏览(38)
  • vue3拖拽布局+动态组件+自适应布局

    1.拖拽布局插件 Vue Grid Layout -️ 适用Vue.js的栅格布局系统 可拖动和可调整大小栅格布局的Vue组件。 https://jbaysolutions.github.io/vue-grid-layout/zh/ //在package.json中dependencies下添加下面插件库,并执行命令npm install  \\\"vue-grid-layout\\\": \\\"^3.0.0-beta1\\\",  2.拖拽页面代码 3.图表子组件代码

    2024年02月11日
    浏览(41)
  • vue中使用element-ui ,设置级联选择器高度问题

    我本来以为设置elemnt-ui组件样式需要用到深度选择器,然后找了好多关于深度选择器的,比如 /deep/ ::v-deep 后来才明白是权重不够,解决方法如下 1、在全局css中设置 缺点:所有级联选择器的高度都是固定的 结论:只有在所有页面级联选择器都一致的情况下或者只有一个级联

    2024年02月12日
    浏览(43)
  • Vue3 - 解决使用 Tailwindcss 后导致 UI 组件库样式受影响,引入后发现项目组件库的组件样式不对了(Element/Ant Design Vue/Naive UI/TDesign)

    网上的教程都无法解决,但本文可以帮助您快速解决该问题。 当项目引入 Tailwind css 后,使用 UI 组件库的某些组件时,发现有些样式丢失及显示错位、背景色丢失等问题, 频发于【按钮组件】背景色丢失 | 【message消息提示组件】样式位置变形等,严重的整个组件库样式都乱

    2024年02月07日
    浏览(57)
  • vue Element UI table表格根据内容长度自适应列宽(af-table-column解决)

    支持自适应列宽功能, 使用方法如下: 安装 引入 使用在需要自适应的列上使用即可 使用前效果 使用后效果

    2024年02月14日
    浏览(36)
  • VUE3安装element ui 失败的原因及解决方法

    在VUE3开发环境中想安装element ui前端库,执行\\\"npm install element-ui --save\\\"命令进行安装时,出现以下错误信息: element-ui不适配vue3,官方已将vue3版本的更新为element-plus. Element-ui适用于Vue2框架 Element-plus适用于Vue3框架 在VUE3的开发环境下安装element-plus,执行如下命令即可:

    2024年02月13日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包