上下两栏的css布局,外围的高度根据窗口大小而变动
当 top 高度固定的时候怎么写
bottom = wrap - top
代码在下面,点击右上角的 [+] 可进入页面编辑,编辑后点[update]可保存一个新版本
http://jsfiddle.net/XfEs5/
当 top 高度不固定时又该怎么写
若要子容器填充父容器的话的设置。 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>