请教下当 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&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;90%;&nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;green;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;#FFF;&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;relative;&nbsp;&nbsp;&nbsp;&nbsp;padding-top:&nbsp;100px; }#top&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;blue;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;100px;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;100%;&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;absolute;&nbsp;&nbsp;&nbsp;&nbsp;top:&nbsp;0; }#bottom&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;red;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;100%; }你说的top高度不固定是指bottom高度是固定的吗？那样的话只需要调换一下位置就好了 一样的写法。<p>...</p>