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的百分比高度则无效。