请教下当 top 高度不固定时又该怎么写？

Question

上下两栏的css布局，外围的高度根据窗口大小而变动当 top 高度固定的时候怎么写bottom = wrap - top

Answer 1

若要子容器填充父容器的话的设置。 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>