高度100 的絕對定位自適應布局

容器高度100%是經常用到的需求，任何容器都可以實現，而且不需要巢狀關係。

把body看作是乙個容器，做為內部物件的上層標籤，他的高度設定為100%是關鍵。

最基本的例子

* html,body /* 同時設定html是為了相容ff */ #box_2

重疊絕對高度效果

縱向相對高度效果

橫向相對寬度效果

這種布局是不需要float的，還可以有很多變化：

1，n列布局 2，n行布局 3，n列加n行交叉布局

值得注意的是在ff下瀏覽相對大小容器頁面時，調整視窗大小的同時容器大小進行實時調整，而ie只會在視窗調整完畢後才出效果。

ie5.0 / ie5.5 / ie6.0和ff1.5測試通過

forum高度100%的絕對定位自適應布局 http://bbs.51js.com/viewthread.php?tid=51314 div+css如何實現中間區域自適應高度 http://www.blueidea.com/bbs/newsdetail.asp?lp=1&id=2494868

高度100 的絕對定位自適應布局

容器高度100 是經常用到的需求，任何容器都可以實現，而且不需要巢狀關係。把body看作是乙個容器，做為內部物件的上層標籤，他的高度設定為100 是關鍵。最基本的例子 重疊絕對高度效果 縱向相對高度效果 橫向相對寬度效果 這種布局是不需要float的，還可以有很多變化 1，n列布局 2，n行布局 3...

兩欄自適應布局與高度自適應

float bfc 使用 float 讓 left 塊脫離文件流，使用 bfc 規則，讓 right 塊寬度自適應，如下 類似聖杯布局給父元素設定 padding left right 元素寬度 100 left 元素通過 設定 left 和 margin left 屬性拉取到前面 flexflex...

css布局之高度自適應

方法一 利用絕對定位 乙個元素是絕對定位時，如果沒有給它設定高度或寬度，則它的的高度和寬度是由它的top right bottom left屬性決定的。13 高度自適應，就是同時設定了top和bottom的值。方法二 利用padding實現 1 給父元素留padding top，然後用相對定位，把b...