首页 > 其他分享 >height:100%,height:100vh什么区别呢

height:100%,height:100vh什么区别呢

时间:2024-10-13 18:48:19浏览次数:6  
标签:100% 元素 高度 height 视口 100vh

height: 100%; 和 height: 100vh; 是设置元素高度的两种不同方式

  1. height: 100%;

    • 这个属性会使元素的高度等于其父元素的高度。也就是说,元素的高度将会占据其父元素的百分之百高度。
    • 值为百分比时,实际的高度取决于其父元素的高度。如果父元素没有显式地设置高度,则 height: 100%; 将不会生效,因为无法确定百分比的基准。

 

     2、height: 100vh;

  • vh 表示视口高度(Viewport Height),即浏览器可视区域的高度。
  • height: 100vh; 将元素的高度设置为视口高度的百分之百,即元素的高度将填充整个浏览器可视区域的高度。
  • 这种方法不受父元素高度影响,因为它是相对于视口的高度

因此,主要区别在于:

  • height: 100%; 是相对于父元素的高度,需要父元素有明确的高度设置才能生效。
  • height: 100vh; 是相对于浏览器视口的高度,不受父元素影响,可以确保元素始终填满整个视口的高度

标签:100%,元素,高度,height,视口,100vh
From: https://www.cnblogs.com/yansunda/p/18462737

相关文章

  • 用第二客户端远程连接hive报错Failed to connect to node1:10000
    报错内容:24/10/1315:08:35[main]:WARNjdbc.HiveConnection:Failedtoconnecttonode1:10000Error:CouldnotopenclienttransportwithJDBCUri:jdbc:hive2://node1:10000:Failedtoopennewsession:java.lang.RuntimeException:org.apache.hadoop.ipc.Remo......
  • 牛客小白月赛100 A~E
    牛客小白月赛100A~EA-ACM中的A题签到不多说//AConemoretimes//nndbk#include<bits/stdc++.h>usingnamespacestd;typedeflonglongll;constintmod=1e9+7;constintN=2e5+10;lla[N],b[N];intmain(){ios::sync_with_stdio(false);cin.ti......
  • Python从0到100(六十三):Python OpenCV-入门基础知识
    前言:零基础学Python:Python从0到100最新最全教程。想做这件事情很久了,这次我更新了自己所写过的所有博客,汇集成了Python从0到100,共一百节课,帮助大家一个月时间里从零基础到学习Python基础语法、Python爬虫、Web开发、计算机视觉、机器学习、神经网络以及人工智能相关知......
  • PHP获取图片属性(size, width, 和 height)的函数
    在PHP中,要获取图片的尺寸(宽度和高度),你可以使用getimagesize()函数。这个函数不仅返回图片的宽度和高度,还返回图片的类型和MIME类型等信息。以下是getimagesize()函数的基本用法:<?php//假设$imagePath是图片的完整路径$imagePath='path/to/your/image.jpg';......
  • 代码随想录Day24 | LeetCode 122. 买卖股票的最佳时机 II、LeetCode 55. 跳跃游戏、Le
    LeetCode122.买卖股票的最佳时机IIclassSolution:defmaxProfit(self,prices:List[int])->int:res=0foriinrange(1,len(prices)):res+=max(0,prices[i]-prices[i-1])returnresLeetCode55.跳跃游戏class......
  • 毕业设计项目-基于ssm+vue的外卖点餐系统+vue源码+10000字论文
    项目简介基于SSM实现的,主要功能如下:审核说明本项目源码收集于互联网或用户分享,经我们对资料的认真审核整理,确保资源可以正常使用;悉知:有一定的基础同学可以自行导入idea或者eclipse中运行项目,我们并不提供免费的技术指导。项目技术spring/springmvc/mybatis/(jsp)/html/......
  • kubernetes 初始化集群 证书100年操作 【kubeadm】
    1、下载源码[root@SPHQBKCEK8SMS01~]#gitclonehttps://github.com/kubernetes/kubernetes#切换到自己的版本,修改源码,比如我的是v1.20.15版本[root@SPHQBKCEK8SMS01kubernetes]#cdkubernetes/[root@SPHQBKCEK8SMS01kubernetes]#gitcheckoutv1.20.15[root@SPHQBKCE......
  • 【gpt搬运】bash脚本压缩png,jpg图片,当图片大小大于100kb的时候
    可以编写一个Bash脚本,使用find命令查找图片文件并利用imagemagick或jpegoptim以及pngquant等工具来压缩图片。如果图片大小大于100KB,就进行压缩。下面是一个示例脚本:准备工具:安装imagemagick:用于转换图片格式安装jpegoptim:用于压缩.jpg图片安装pngquant:用于......
  • ### 100th 2024/9/8 WQS二分小结
    破百了,路长了这个世界,能听见我的回响吗?循环了很久很久的Echoism回望了过去,也要认真注视当下的现实了对吗?来看看WQS二分可以用上的题目有Raper,Gmoj的coffee和划分序列这几题都有一个共同的特点,就是要从n个中恰好选k个的极值而他们的取值都有一个共性,就是关于k,该函数的形状......
  • 大厂P8,35岁被辞退,欠银行 100 万,靠AI逆袭,月入 10W+
    1、医院陪同产检时的“小焦虑”引发的“大转折”坐在医院产科的候诊区,我紧握着爱人的手,看着她那高高隆起的肚子,仿佛能听到里面小生命的轻声呼唤。37周足月了,孩子即将到来,整个过程充满了甜蜜与期待。她的眼中闪烁着幸福的光芒,似乎对未来有着无限憧憬。然而,在这温馨的时刻,我心中......