1.height设置成100%时发现高度没有变化
在此处我们可以看到我们把page类已经设置了100%,发现高度并没有占满屏幕,那是height:100%这个100%是相对于他的父元素来说的,通过图2我们可以看到page标签的高度就是自适应,因此即使.content的高度设置成100%那么他顶多就是他的父元素的高度,
在此处若想使渐变背景能够占满整个屏幕的高度,有两种方法:1、page标签的高度设置成100%,如图3;2.content的height高度为100vh.如图4
图1
图2
图3
图4
2、 100%和100vh/vw的区别。
% 是相对于父元素的大小设定的比率。
vw (viewport width) vh (viewport height) 是视窗的大小,100vw = 100%视窗宽度 100vh = 100%视窗高度,用vw,vh设定的大小只和视窗大小有关,和他们的父元素高度宽度没关系,所以用来开发多种屏幕设备的应用用这个单位还是挺合适的,