100%与100vh/100vw的区别，为什么有时候100%不生效

问题描述：一个页面中想要分成上下两部分各占50%。想要50%生效得在body的样式中进行设置，但是单纯在body中加上height:100%,是无法生效的，解决办法有两种：

①：在body样式中添加height = 100vh；

vw (viewport width) vh (viewport height) 是视窗的大小，100vw = 100%视窗宽度 100vh = 100%视窗高度，用vw，vh设定的大小只和视窗大小有关，和他们的父元素高度宽度没关系。

②：设置html,body{ height:100% }

因为% 是相对于父元素的大小设定的比率，div的父元素为body，body的父元素为html。而浏览器默认状态下，没有设置html的高度，如果仅仅设置body的100%，不设置html元素的高度为100%，那么body的高度不会生效， body的高度没有参考高度，那么div的百分比高度则无效。

100%与100vh/100vw的区别，为什么有时候100%不生效相关推荐

CPU100%不限性能和100%独享资源的区别
CPU100%不限性能和100%独享资源的区别是什么,最近这类问题突然激增,这里为大家科普一下 1,什么是独享100%独享资源通常看到独享100%资源的云服务器是S1.S2名称,像阿里云双十一和阿 ...
mysql中12e10等于多少_一篇文章看懂mysql中varchar能存多少汉字、数字，以及varchar(100)和varchar(10)的区别...
看完这篇文章,你能搞清楚以下问题: 1.varchar(100)和varchar(10)的区别在哪里? 2.varchar能存多少汉字.数字? 3.varchar的最大长度是多少呢? 4.字符.字节. ...
MySQL中的char和varcharmysql中varchar能存多少汉字、数字，以及varchar(100)和varchar(10)的区别
1.varchar能存多少汉字.数字? 具体还是要看版本的,一个字符占用3个字节 ,一个汉字(包括数字)占用3个字节=一个字符 4.0版本以下,varchar(100),指的是100字节,如果存放UT ...
CSS中100%和inherit(继承)的区别，以及inherit的简单应用
CSS中100%和inherit(继承)的区别正常情况下没有区别兼容性 100% ie6+ inherit ie8+ 该元素绝对定位,父元素使用静态定位(static)或没有使用定位时 100%继 ...
mysql中varchar能存多少汉字、数字，以及varchar(100)和varchar(10)的区别
mysql中varchar存储容量 1.varchar能存多少汉字.数字? 2.varchar的最大长度是多少呢? 3.字符.字节.位,之间的关系? 4.mysql字段类型存储需要多少字节? 5.va ...
100块钱买100只鸡php,使用JS计算买100只鸡问题
这篇文章主要介绍了JS计算输出100元钱买100只鸡问题的解决方法,简单描述了100元钱买100只鸡问题并结合实例形式分析了问题解决的思路与具体实现方法,需要的朋友可以参考下本文实例讲述了JS计算输 ...
c语言随机产生10个30 100,c语言编写随机产生10个100~200之间整数，幷按从大到小排序...
你所写的代码是正确的,想要查看,请用这个:includeint main(){char ch;scanf("%c",&ch);if(ch>='A'&ch){c ...
linux 脚本1加到100,shell脚本之从1加到100之和的思路
一.使用双括号(())进行计算 #!/bin/bash # a=0 for((b=0;b<=100;b++));do ((a=a+b)) //也可以写成a=$((a+b)) done echo ...
带分数 100 可以表示为带分数的形式：100 = 3 + 69258 / 714
package org.bluebridge.topics;/** 带分数100 可以表示为带分数的形式:100 = 3 + 69258 / 714还可以表示为:100 = 82 + 3546 / 1 ...

100%与100vh/100vw的区别，为什么有时候100%不生效

100%与100vh/100vw的区别，为什么有时候100%不生效相关推荐

最新文章

热门文章