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

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

在文档流中，DIV的高度默认就是根据内容的高度自适应的。

如果是想适配不同设备的窗口大小，可以设置百分比。或者通过position定位，然后设置top和bottom值。再或者利用css3的flexbox布局，设置父级的display为flex，方向为纵的，然后设置其flex：1；

如果可以不考虑IE67可以用display:table布局：

HTML：

<div class="outer">

    <div  class="inner-title">

        A

    </div>

    <div class="inner-content">

        B

    </div>

</div>

CSS：

.outer{

    background-color:blue

    height:400px

    display: table

    width:100%

}

.inner-title{

    background-color:#CCC

    display:table-row 

    width:100%

    height:100px

}

.inner-content{

    background-color:#888

    display:table-row

    width:100%

}

IE6和IE7下估计只能用JS算高度了

---