div css實現框架布局

2021-05-12 16:50:30 字數 693 閱讀 7136

頭部和底部的高度固定,並且位置需始終保持不變,中間部分的可視高度為除去頭和尾的剩餘部分,實際高度則隨內容的多少自適應,如果實際高度超出了超出可視高度則出現滾動條

css部分:

html,body

#dyhead,#dyfoot

#dyhead

#dyfoot

#dycontent

xhtml部分:

中間大段的內容

中間大段的內容

間大段的內容

中間大段的內容

中間大段的內容

中間大段的內容

中間大段的內容

中間大段的內容

中間大段的內容

中間大段的內容

中間大段的內容

中間大段的內容

中間大段的內容

endfooter

其實在不考慮ie6及更早的瀏覽器的情況下,以上css中的hack是可以去掉的,而且也不需要進入怪異模式(quirks mode)就可以實現。

用Class組合實現Div CSS布局

現在編寫xhtml,我們強烈不推薦此種方法,應該是id,class綜合應用。此文章只是講述一種思維,並非建站過程中的方法!用標準件的方式來組裝網頁div布局。我把class分為2種 布局class 風格class。布局class是骨架,風格class是衣服。舉個例子 比如布局中的左欄。首先它的屬性有...

div css布局漫談

1.css布局常用的方法 float none left right 取值 none 預設值。物件不飄浮 left 文字流向物件的右邊 right 文字流向物件的左邊 它是怎樣工作的,看個一行兩列的例子 xhtml 這裡是第一列 這裡是第二列 css wrap column1 column2 cle...

常用div css布局

1.css布局常用的方法 float none left right 取值 none 預設值。物件不飄浮 left 文字流向物件的右邊 right 文字流向物件的左邊 它是怎樣工作的,看個一行兩列的例子 xhtml 這裡是第一列 這裡是第二列 css wrap column1 column2 cle...