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