css height 100% 和 100vh 区别

css height 100% 和 100vh 区别1.height100%意思就是,想在这container设置高度![有约束]高度设置成100%但是呢这得看container的父级body的height是否为100%还往上看body的父级html的height是否为100%container->body->html[他们的height元素都要设置为100%]<html><head><style>html,bod

大家好,又见面了,我是你们的朋友全栈君。

1. height 100%

意思就是,想在这container设置高度! [有约束]

高度设置成 100%

但是呢这得看 container的父级 body的height是否为100%

还往上看body的父级 html的height是否为100%

container – > body – >html [他们的 height 元素都要设置为 100%]

<html>
    <head>
        <style> html,body{ 
     height: 100%; } .container{ 
     background: pink; height: 100%; } </style>
    </head>
    <body>
        <div class="container">
            <div>one</div>
            <div>two</div>
            <div">three</div>
        </div>
    </body>
</html>

2. height 100vh

意思就是,别的元素啥都不管,我就想在这 container 设置高度![没有约束]

高度设置成 100vh

<html>
    <head>
        <style> .container{ 
     background: pink; height:100vh; } </style>
    </head>
    <body>
        <div class="container">
            <div>one</div>
            <div>two</div>
            <div>three</div>
        </div>
    </body>
</html>

在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/145095.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • OpenCV调用海康威视等摄像头(处理rtsp视频流)方法以及,出现内存溢出(error while decoding)或者高延迟问题解决[通俗易懂]

    OpenCV调用海康威视等摄像头(处理rtsp视频流)方法以及,出现内存溢出(error while decoding)或者高延迟问题解决[通俗易懂]摄像头与电脑的连接首先,你需要获得hikvision摄像头的密码以及用户名(不知道的可以去打客服电话进行咨询),这里不做介绍;其次,将电脑的ip设置与hikvision同频段,一般来说,海康威视的ip为192.168.1.64,电脑设置如下:最后,使用IE浏览器(其他可能不支持),输入ip:192.168.1.64并登陆输入用户名和密码即可获取视频画面(可以观察到,视频有畸变)使用python+openCV获取监控画面在使用openCV获取监控画面,具体代码如下url格式为:“rtsp:

    2022年10月18日
    1
  • 计算机dll修复工具,DLL修复工具哪个好?五款修复能力强推荐

    计算机dll修复工具,DLL修复工具哪个好?五款修复能力强推荐为什么会用到dll修复工具呢?因为我们在打开某些程序或者软件的时候会提示找不到某某.dll文件,关键是这些dll文件还不一样,我们去网上下载这些dll文件结果显示跟系统的版本不一致,反正就是各种麻烦,自己去找又费时又费力,而且往往对于有些游戏来说,修补了某一个dll又提示缺少另一个dll文件,这些其实可能都是系统本身太精简或者没有安装一些依赖软件导致的,这时候你完全不需要手动去找这些dll文件,只…

    2022年5月30日
    68
  • Createmutex_pthread create

    Createmutex_pthread create//TestStorage.cpp:定义控制台应用程序的入口点。//#include”stdafx.h”#include#include//#define MUTEX_DBGUINTWINAPIThread1(LPVOIDpara){#ifdef MUTEX_DBG HANDLE*phMutex=(HANDLE*)para; WaitForSingleObj

    2022年10月4日
    2
  • 外汇百科

    外汇百科
    外汇百科名片  外汇
    外汇是以外币表示的用于国际结算的支付凭证。国际货币基金组织对外汇的解释为:外汇是货币行政当局(中央银行、货币机构、外汇平准基金和财政部)以银行存款、财政部库券、长短期政府证券等形式所保有的在国际收支逆差时可以使用的债权。包括:外国货币、外币存款、外币有价证券(政府公债、国库券、公司债券、股票等)、外币支付凭证(票据、银行存款凭证、邮政储蓄凭证等)。
    目录简介外汇市场TransMarket集团FXSolutionsIFX与IFX(俗称FXSOL)?FX

    2025年10月19日
    3
  • mongodb导入json_json格式是什么

    mongodb导入json_json格式是什么刚开始接触mongodb,以下介绍使用mongoVUE来导入和导出json格式的数据1、导出瞬间导出到指定的text文件中,我们用文本编辑器打开预览2、导入导入的时候首先我我们要选择导入的表,点进去之后可以直接写json文本也可以导入,txt文件不过我们刚刚导出的json格式的txt文件是不能直接导入的,稍作一下修改,(需要的话去掉_id),去掉每个json串之间…

    2022年8月21日
    8
  • (二)购物商城数据库设计-商品表设计

    (二)购物商城数据库设计-商品表设计大家好,今天我们来设计一下购物商城的商品表。我们的目标是表结构能够满足下面这张图的搜索:在设计表之前,我们先来了解下商品中的一个概念:SPU和SKUSPUSPU(StandardProductUnit):标准化产品单元。是商品信息聚合的最小单位,是一组可复用、易检索的标准化信息的集合,该集合描述了一个产品的特性。通俗点讲,属性值、特性相同的商品就可以称为一个SPU。SK…

    2022年6月20日
    46

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号