100vh

2024-10-283、整体布局及菜单
1、布局大概如下：2、修改App.vue，增加菜单<template><divclass="layout"><el-containerclass="container"><el-asideclass="aside"><divclass="head"&
2024-10-13height:100%,height:100vh什么区别呢
height:100%; 和 height:100vh; 是设置元素高度的两种不同方式height:100%;：这个属性会使元素的高度等于其父元素的高度。也就是说，元素的高度将会占据其父元素的百分之百高度。值为百分比时，实际的高度取决于其父元素的高度。如果父元素没有显式地设置高度，则 height:
2024-09-04css 中高度100%和100vh
‌100%和100vh的区别‌‌12在‌CSS中，height:100%表示元素的高度将与其父元素的高度相同。但是，要使height:100%生效，父元素必须具有明确定义的高度，例如固定高度值或相对定位。如果父元素的高度未被明确定义，那么height:100%将不会生效。另一方面，height:100vh表示元素的高度将占
2024-07-14css设置弹性flex后，如果设置100vh高度不撑满的原因
问题父元素设置height为100%，有两个子元素，第一个设置height:100vh，第二个设置flex:1，此时第一个高度无法撑满盒子原因+解决方式当父元素设置display为flex,第一个div设置高度64px,剩一个div设置高度为flex：1,这时候肯定两个子元素同高。但是如果此时设置第一个div的高度为100
2024-04-20前端实现盒子水平垂直居中的四种方式
在前端开发中，实现元素的水平垂直居中是一个常见的需求。下面我将介绍几种常见的方法来实现这个效果：1.使用Flexbox（弹性盒子Flexbox是一个现代的布局模型，可以轻松地实现元素的水平垂直居中。Html代码<divclass="flex-container"><divclass="flex-item">我是内容</div>
2023-12-19记录--一行代码修复100vh bug
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助你知道奇怪的移动视口错误（也称为100vhbug）吗？或者如何以正确的方式创建全屏块？一、100vhbug什么是移动视口错误？你是否曾经在网页上创建过全屏元素？只需添加一行CSS并不难：.my-page{height:100vh}1v
2023-12-19一行代码修复100vh bug | 京东云技术团队
你知道奇怪的移动视口错误（也称为100vhbug）吗？或者如何以正确的方式创建全屏块？一、100vhbug什么是移动视口错误？你是否曾经在网页上创建过全屏元素？只需添加一行CSS并不难：.my-page{height:100vh}1vh是视口高度的1%，正是我们所需要的。但当我们在移动设备上测试时，就
2023-10-24Vue无线滚动不触发问题
Vue的v-infinite-scroll="load" 会无线触发要定义实际高度和可视高度之间关系设置style="overflow:auto;height:calc(100vh - 49px)" 100vh = 100% <divclass="box"style="overflow:auto;height:calc(100vh-100px)"><divv
2023-09-28CSS 基础 4 - CSS 常用单位
CSS基础4-CSS常用单位px：基础单位em：相对当前父容器的系数，可以累乘rem：相对根<html>的系数，方便计算vw/vh：viewportwidth/height，整个浏览器的大小，取值范围1-100如100vh，占满高度，如果出现滚动条，是因为body预设的padding和margin如30%宽度的侧边栏：height:100vh;
2023-06-05el-aside无法铺满屏幕
第一步：在App.vue中写入样式<stylescoped>#app{position:absolute;top:0;left:0;width:100%;height:100%;}</style>第二步：调节el-aside样式（注意如果没有背景色的话，看起来还是没有铺满）<stylescoped>.el-aside{height:100vh;}</style>第三步：第二步的
2023-02-26uni-app中swiper组件加入视频后无法全屏显示方案解决
今天，在写uni-app的代码过程中，发现swiper组件里面的视频不能占全屏，出不来效果，虽然官网也说自动设置了100%是没错，但是，再次设置宽高100%，不起作用，同时还会导致swiper组件不显
2023-02-24css-元素使用100vw|vh出现滚动条
给元素100vw与100vh，发现界面出现横向和竖向滚动条...<style>.container{width:100vw;height:100vh;}</style><body><divclass="
2022-12-08#yyds干货盘点#css样式vh屏幕高度
众所周知，在从css3中，vh和wh指的是浏览器可见区域。1vw等于视窗总宽度的1%1vh等于视窗总高度的1%移动端使用vh遇到的问题由于，各种浏览器的计算高度不一样，譬如Safari浏览
2022-11-10calc()使用方法
在开发的过程中，常常会遇到头部高度是40px，而内容页是除去头部，占满视窗的整个高度，有时候是用js来处理，现在用css的calc是非常方便的:.container{ height: calc(100%
2022-11-08scroll事件监听不生效
vue使用window.addEventListener('scroll',this.scroll)监听滚动事件不生效window.addEventListener('scroll',this.scroll)写在mounted里面html,body的高度别限制,