CSS3原生支持div与浏览器等高等宽方法_html/css_WEB-ITnose

一般我们需要设置一个div与浏览器等高并等宽充满全屏，然后设置背景图片来达到一个高大上的排版效果。具体的例子看下面的图片演示：

随着鼠标的滚动，整个图片也滚上去了。

以前为了达到这样的等高效果，一般通过js来获取当前浏览器高度然后动态设置div的height，有时候还需要不断地检测浏览器resize事件来不断调整div的height。

其实CSS自带的两个单位vw与vh就能支持与浏览器等高等宽的效果，完全可以抛弃js了！
演示效果

html代码如下:

                  全屏图片                  .fullbg {            position: relative;            width: 100vw;            height: 100vh;            background-position: center center;            background-size: cover;            background-repeat: no-repeat;        }        .inner-content {            position: absolute;            top: 50%;            left: 50%;            transform: translate(-50%, -50%);            color: #fff;        }           
        
            
我就是这么屌

      
查看更多关于CSS3原生支持div与浏览器等高等宽方法_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did113983