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

Question

上下两栏的css布局，外围的高度根据窗口大小而变动

当 top 高度固定的时候怎么写

bottom = wrap - top
代码在下面，点击右上角的 [+] 可进入页面编辑，编辑后点[update]可保存一个新版本
http://jsfiddle.net/XfEs5/

当 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>

Answer 2

好多年了啊，现在容易了好多。