用html5开发手机网站，div的高度与宽度比例怎么来设定

html-css020

用html5开发手机网站，div的高度与宽度比例怎么来设定,第1张

div的100%是从其上一级div的宽高继承来的，有一点很关键，就是要设置div100%显示，必须设置其上一级div的宽度或高度，否则无效。举例说明：父div(deman)宽300高200，子div(cc)如果在这个条件下设置divcc的宽高都为100%的话，那cc的确切大小就是父div的大小(宽300高200)，在尝试中你会发现，div显示会受自身和其上一级div的padding和margin影响，而其实际宽高不受影响。

父集div使用relative定位，padding-bottom值充当空间，子集video元素absolute定位

具体例子如下，比如视频是16:9的比例，这样比例就不会变了，并且适配div的等高比例

css

.vid-wrapper{

    width:100%

    position:relative

    padding-bottom:56.25%    /*需要用padding来维持16:9比例,也就是9除以16*/

    height: 0

}

.vid-wrapper video{

    position: absolute

    top:0

    left: 0

    width: 100%

    height: 100%

}

html

<div class="vid-wrappper">

    <video src=""></video>

</div