上下两栏的css布局，下栏的高度 = 外围高度 - 顶栏高度，外围高度不固定

若要子容器填充父容器的话的设置。 bottom {height:100%; }
然后将top定位到warp顶部。 top {position: absolute; top: 0; height: 100px;}
此时top会覆盖到bottom上方,所以需要将bottom向下移动。 .warp {padding: 100px}
就ok了，但是会有一个问题就是warp的实际高度是width + padding-top。

.wrap {
    height: 90%;
    background: green;
    color: #FFF;
    position: relative;
    padding-top: 100px;
}
#top {
    background: blue;
    height: 100px;
    width: 100%;
    position: absolute;
    top: 0;
}
#bottom {
    background: red;
    height: 100%;
}
你说的top高度不固定是指bottom高度是固定的吗？那样的话只需要调换一下位置就好了 一样的写法。

<p>...</p>