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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 光盘制作软件UltraISO软碟通-原版下载+正版注册码

    光盘制作软件UltraISO软碟通-原版下载+正版注册码下载地址为官方下载,个人再提供个正版注册码!一、简要软件类型:光碟工具出品商:EZBSystems语言:中文简体运行平台:WindowsVista,WindowsServer2003,WindowsXP,Windows2000等二、功能UltraISO是一款功能强大而又方便实用的光盘映像文件制作/编辑/格式转换工具。它可以直接编辑光盘映像和从映像中直接提取…

    2022年7月26日
    5
  • 视频采用的压缩编码_视频压缩编码存在的冗余信息

    视频采用的压缩编码_视频压缩编码存在的冗余信息1、什么是H.261编码协议        答:H.261是最早出现的视频编码建议,它采用的算法结合了可减少时间冗余的帧间预测和可减少空间冗余的DCT变换的混合编码方法,其输出码率是p×64kbit/s。p取值较小时,只能传清晰度不太高的图像,适合于面对面的电视电话;p取值较大时(如p>6),可以传输清晰度较好的会议电视图像。该标准主要针对ISDN电话线的视频会议,可视电话等,ISDN的

    2025年6月23日
    3
  • IntelliJ IDEA卸载与安装

    IntelliJ IDEA卸载与安装一、卸载(首次安装可跳过)导出配置运行卸载程序删除缓存&amp;配置&amp;插件卸载完成二、下载安装(一)官网:官网:http://www.jetbrains.com/idea/download/#section=windows官方文档:http://www.jetbrains.com/help/idea/meet-inte…

    2022年6月15日
    52
  • Java程序设计(基础)- 流程控制

    Java程序设计(基础)- 流程控制

    2021年7月21日
    64
  • visual studio2013卸载教程_数据卸载

    visual studio2013卸载教程_数据卸载VisualStudio在安装过程中可能已在您的计算机上安装了附加组件。必须使用“添加或删除程序”按照下面所列顺序手动卸载这些组件。注意:卸载这些组件可能会影响其他已安装的依赖于这些组件的应用程序。以下组件可能已与VisualStudio一起安装到计算机上:MicrosoftMSDN2005速成版MicrosoftVisualStudio2005Tools…

    2022年9月23日
    3
  • 网络编程的三个重要信号(SIGHUP ,SIGPIPE,SIGURG)[通俗易懂]

    网络编程的三个重要信号(SIGHUP ,SIGPIPE,SIGURG)[通俗易懂]  对于信号的介绍,我再前面的一篇博客中做过专门的总结,感兴趣的可以看看。本文主要介绍在网络编程中几个密切相关的函数:SIGUP,SIGPIPE,SIGURG。SIGHUP信号  在介绍SIGHUP信号之前,先来了解两个概念:进程组和会话。进程组  进程组就是一系列相互关联的进程集合,系统中的每一个进程也必须从属于某一个进程组;每个进程组中都会有一个唯一的ID(process…

    2022年5月30日
    56

发表回复

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

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