涨姿式！打造全屏网页只要一行CSS

时间 2019-12-10

标签打造全屏网页只要一行 css 栏目 HTML 繁體版

原文原文链接

现代的网站不少都在它们的主页放有全屏的区域(.section)。就算不是全屏幕，也至少占了全屏的80%~90%，而这须要大量的开发时间和javascript代码。javascript

仍是给你举一个我这里所说的正在使用此布局的网站例子。css

他们使用data属性来保存高度比例好比: data-autosize="0.6" 而后用JS来设置每个区域的高度web

Exposure 为他们的头部使用了一个固定的90%的高度，在缩放时使用JS来改变高度布局

Nimber 使用的技术和spotify相似，高度用JS设置为90%并加上min-height来确保这块区域高于视图区域，这样一般在手机端也能正确显示。网站

雅虎在今年早些时候推出了一个全屏版本的Flickr，设置每个区域(section)的高度为100%，而且替换默认的滚动为JS控制的滚动高度，这里有一篇文章介绍它是如何实现的。spa

前面全部的例子都是用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/