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

2021-05-22 10:14:38 字數 508 閱讀 1003

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

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

最基本的例子

重疊絕對高度效果

縱向相對高度效果

橫向相對寬度效果

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

1,n列布局

2,n行布局

3,n列加n行交叉布局

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

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

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

容器高度100 是經常用到的需求,任何容器都可以實現,而且不需要巢狀關係。把body看作是乙個容器,做為內部物件的上層標籤,他的高度設定為100 是關鍵。最基本的例子 html,body 同時設定html是為了相容ff box 2 重疊絕對高度效果 縱向相對高度效果 橫向相對寬度效果 這種布局是不需...

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

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