XHTML學習筆記 3 之自適應高度css

2021-04-16 05:21:38 字數 542 閱讀 5407

#header

#mainbox

#sidebar

#menu

#content

#footer

這個例子的頁面主要**如下:

重點在於#mainbox層巢狀了#menu,#sidebar和#content三個層。當#content的內容增加,#content的高度就會增高,同時#mainbox的高度也會撐開,#footer層就自動下移。這樣就實現了高度的自適應。

另外值得注意的是:#menu和#content都是浮動在頁面右面"float: right;",#sidebar是浮動在#menu層的左面"float: left;",這是浮動法定位,還可以採用絕對定位來實現這樣的效果。

這個方法存在另乙個問題,就是側列#sidebar的背景無法百分之百。一般的解決辦法就是用body的背景色來填充滿。(不能使用#mainbox的背景色,因為在mozilla等瀏覽器中#mainbox的背景色失效。)

引用自:http://blog.csdn.net/dzmiao/archive/2004/12/27/231534.aspx

XHTML學習筆記 3 之自適應高度

header mainbox sidebar menu content footer 這個例子的頁面主要 如下 重點在於 mainbox層巢狀了 menu,sidebar和 content三個層。當 content的內容增加,content的高度就會增高,同時 mainbox的高度也會撐開,foot...

學習筆記之自適應布局

這個只是我學習過程中從各處找資料整理的筆記,如果有不對的或者不準確的說法還希望各路大神能幫我指正,在此謝過!尺寸 1.百分比 相對于父物件 2.auto 塊級水平方向的auto,塊級元素的margin border padding content寬度之和等於父元素width 3.包裹性 元素被設定為...

XHTML學習筆記 3 之布局例項

body樣式 body 定義了邊框邊距為0 背景顏色為 fefefe,背景為bg logo.gif,位於頁面右下角,不重複 定義了字型尺寸為12px 字型顏色為 666 行高150 定義頁面左列樣式 left 定義頁面中列樣式 middle 定義頁面右列樣式 right 定義中列和右列div我都採用...