涨姿势！打造全屏网页只要一行CSS
现代的网站很多都在它们的主页放有全屏的区域(.section)。就算不是全屏幕，也至少占了全屏的80%~90%，而这需要大量的开发时间和javascript代码。
还是给你举一个我这里所说的正在使用此布局的网站例子。
他们使用data属性来保存高度比例比如: data-autosize="0.6" 然后用JS来设置每一个区域的高度
Exposure 为他们的头部使用了一个固定的90%的高度，在缩放时使用JS来改变高度
Nimber 使用的技术和spotify类似，高度用JS设置为90%并加上min-height来确保这块区域高于视图区域，这样通常在手机端也能正确显示。
雅虎在今年早些时候推出了一个全屏版本的Flickr，设置每一个区域(section)的高度为100%，并且替换默认的滚动为JS控制的滚动高度，这里有一篇文章介绍它是如何实现的。
前面所有的例子都是用JavaScript实现的，而下面就是见证奇迹的时刻:
我们使用纯CSS来实现前面的说的布局，并且支持大多数的现代浏览器
要是我们只用一行CSS来实现……
.section { height: 100vh; }
是的，视窗高度（viewport height）， 1vh = 1%的浏览器高度
无需任何辅助，视窗高度知道你的浏览器每一时刻的高度，并且可以由此设置你要的区域(section)高度，我用此方法做了一个Demo，我试着改变窗口大小它也能完美适应哦！
这个方法是如此强大，因为你可以无限的组合布局，如果你说，你想要所有的区域都是100%的高度，除了第一屏是90%，同时要保持页面是连续的。好的，你需要的是另加一行CSS:
.section { height: 100vh;}
.section—first { height: 90vh; }
至于浏览器的支持情况也是非常好的，它在测试网站caniuse.com得到了78.38% 的结果，同时支持IE9+
这个方法看起来是非常不错的，虽然没有得到大范围的使用测试，我也说不出这种技术有什么缺陷的地方，或者你该用与不该用。但是你可以视自身情况尝试一下。你可以先备份好你为浏览器写的一些JavaScript，或者找其他的替代。
最后我不得不再提一个切片做得很好的例子，也是只使用了CSS，但是用了一点点不同的技巧。
这家伙给头部使用了一个 position:fixed 并给它的区域使用了完美的100%高度，这是一个稍稍不同的例子，各有利弊，但确实是一个不用JS的例子！
转载自：Hinpc.com
作者：Leon
原帖地址：http://blog.hinpc.com/up-position-create-full-web-pages-as-long-as-a-single-line-css/
浙公网安备 33010602011771号