巧用一行CSS代码解决图片全屏高度问题

前言：前两天看了大漠的文章《管理CSS层叠》http://www.w3cplus.com/css3/managing-the-css-cascade.html 有感，直接利用 inherit 这个属性解决了一个需要js动态获取的问题。

---

需求：最近接到一个移动端展示首页的切页需求，要求全屏滚动，图片撑满屏幕，滑动加载下一屏。

分析：全屏滚动自然用到了类似fullpage的插件，然后放上图片、按钮就行了。

方法、步骤：

(1)选取基于Zepto的插件，zepto.fullpage.js；

(2)配置本地环境，引入相应的js文件、CSS文件；

(3)采用flex布局。

(4)布局优化，检查细调。

难点：

(1)其实就是一个，图片的布局，简单优雅，易于维护。

HTML结构：

如上，body标签下面就是整个插件的父类 .wp-inner ，然后每一屏就是 .page .page ，接着就是我写的图片的父类及图片，很简单清爽的结构；

CSS代码： 就这么几行，唯一的难点就是让图片撑满整个屏幕，一般的想法是直接利用js，获取屏幕高度，然后看情况是否需要动态修改，唯一的问题就是自己写的js跟插件封装的方法是否融洽……

思维发散ing……

最后观察到其实js最用作用于页面上其实给了.page添加了一个行内样式style="height:xxx;"，那么我们能不能直接利用呢，能用CSS解决的问题就不用JS剞劂是我们坚守的原则。

最后 尝试发现，直接对图片、及图片控制的父元素的高度写一个CSS样式就行了

---

其实最终发现，很多时候可以合理利用CSS做好交互，只是对CSS属性认识不够深刻罢了~

页面地址的话，以后补上，原因你懂的~

---