css height 100% 和 100vh 区别

全栈程序员-站长 • 2022年5月18日上午7:20 • 未分类 • 阅读 59

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)

全栈程序员-站长

0 0

HTML4.01规范中英文对照-有关SGML和HTML的一些事(1)

HTML4.01规范中英文对照-有关SGML和HTML的一些事(1)

全栈程序员-站长
2021年8月11日
通过进程名获取窗口句柄

通过进程名获取窗口句柄HWNDFindMainWindow(unsignedintprocessID){structHANDLE_DATA{unsignedintprocessID;HWNDhandle;}data;data.processID=processID;data.handle=0;staticautoIsMainWindow=[](HWNDhandle)->BOOL{.

全栈程序员-站长
2022年7月21日
java dom4j 查找_Java使用dom4j查询xml元素

java dom4j 查找_Java使用dom4j查询xml元素1.Java使用dom4j查询xml元素：1.1book.xml文件如下：a1疯狂Java讲义(附光盘)李刚编著74.20java.jpg总结了几百个Java学员学习过程中的典型错误.]]>a2轻量级JavaEE企业应用实战李刚编著59.20ee.jpg本书主要介绍以Spring+Hibernate为基础的JavaEE应用.2.使用dom4j查询xml元素：创建一个TestPath类…

全栈程序员-站长
2022年7月14日
Mac安装yarn

Mac安装yarn1.全局安装yarnnpmi-gyran#查看安装是否成功yarn–version2.设置淘宝镜像，下载速度更快yarnconfigsetregistryhttps://registry.npm.taobao.com3.配置环境变量echo”PATH=$PATH:~/.yarn/bin”>>~/.bash_profile&&source.bash_profile…

全栈程序员-站长
2022年5月26日
优先队列（堆）priority queue

优先队列（堆）priority queue优先队列（堆）priorityqueue完全二叉树：除了最底层都被元素填满堆序性：除根节点，最小堆每个节点父亲的Key小于等于该节点的Key，最大堆反之优先队列的申明structHeapStruct;typedefstructHeapStruct*PriorityQueue;PriorityQueueInitialize(intMaxElements);void…

全栈程序员-站长
2022年7月16日
jetbrainspycharm改中文_pycharm无法debug

jetbrainspycharm改中文_pycharm无法debug在IDE中写代码时，很多时候需要用到多行编辑模式。像我写java或者scala等jvm代码使用的是intellij，而写python代码一般使用的是pycharm，这两IDE都是JetBrains系列的IDE。JetBrains系列IDE里，多行编辑模式很简单，在文件中邮件，然后选择ColumnSelectMode，就可以进行多行编辑了。Intellij里面的多行编辑效果图pycha…

全栈程序员-站长
2022年8月26日

发表回复

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