css 总高度100%。里面有两个垂直的div。上面的高度自适应。下面的40px。

html-css015

css 总高度100%。里面有两个垂直的div。上面的高度自适应。下面的40px。,第1张

<div class="outer">

<div class="A">头部DIV </div>

<div class="B">下部DIV </div>

</div>

html,body { height: 100%padding: 0margin: 0}

.outer { height: 100%padding: 100px 0 0box-sizing: border-box position: relative}

.A { height: 100pxbackground: #BBE8F2position: absolutetop: 0 left: 0 width: 100%}.B { height: 40px background: #D9C666}

由于margin, padding 的百分比数值是相对父元素的宽度计算的，只需将元素垂直方向的一个padding值设定为与width的一定比例就可以了。比如正方形：

未完待续

很简单，利用table的自适应的属性即可。最外层定义一个dispaly:table就好，如果要宽度到左右两边，高度自适应的话，可以这样设置，代码如下：

.ctn {width:100%display:table}