WEB標(biāo)準(zhǔn)教程第10天:自適應(yīng)高度_Web標(biāo)準(zhǔn)教程
教程Tag:暫無(wú)Tag,歡迎添加,賺取U幣!
假如我們想在3列布局的最后加一行頁(yè)腳,放版權(quán)之類(lèi)的信息。就碰到必須對(duì)齊3列底部的問(wèn)題。在table布局中,我們用大表格嵌套小表格的方法,可以很方便對(duì)齊三列;而用div布局,三列獨(dú)立分散,內(nèi)容高低不同,就很難對(duì)齊。其實(shí)我們完全可以嵌套div,把三列放進(jìn)一個(gè)DIV中,就做到了底部對(duì)齊。下面是實(shí)現(xiàn)例子(白色背景框模擬一個(gè)頁(yè)面):
Body
這個(gè)例子的頁(yè)面主要代碼如下:
<div id="header"></div>
<div id="mainbox">
<div id="menu"></div>
<div id="sidebar"></div>
<div id="content"></div> </div> <div id="footer"></div> 具體樣式表都寫(xiě)在相應(yīng)版塊里了。重點(diǎn)在于#mainbox層嵌套了#menu,#sidebar和#content三個(gè)層。當(dāng)#content的內(nèi)容增加,#content的高度就會(huì)增高,同時(shí)#mainbox的高度也會(huì)撐開(kāi),#footer層就自動(dòng)下移。這樣就實(shí)現(xiàn)了高度的自適應(yīng)。 另外值得注重的是:#menu和#content都是浮動(dòng)在頁(yè)面右面"FLOAT: right;",#sidebar是浮動(dòng)在#menu層的左面"FLOAT: left;",這是浮動(dòng)法定位,還可以采用絕對(duì)定位來(lái)實(shí)現(xiàn)這樣的效果。 這個(gè)方法存在另一個(gè)問(wèn)題,就是側(cè)列#sidebar的背景無(wú)法百分之百。一般的解決辦法就是用body的背景色來(lái)填布滿(mǎn)。(不能使用#mainbox的背景色,因?yàn)樵贛ozilla等瀏覽器中#mainbox的背景色失效。) 好了,主要的框架已經(jīng)搭建完畢,剩下的工作只是往里面添磚加瓦。假如你希望嘗試其他布局,推薦看看以下文章: CSS布局16例 onestab:三欄復(fù)合布局演示
onestab:自由伸展的三欄式版面
<div id="menu"></div>
<div id="sidebar"></div>
<div id="content"></div> </div> <div id="footer"></div> 具體樣式表都寫(xiě)在相應(yīng)版塊里了。重點(diǎn)在于#mainbox層嵌套了#menu,#sidebar和#content三個(gè)層。當(dāng)#content的內(nèi)容增加,#content的高度就會(huì)增高,同時(shí)#mainbox的高度也會(huì)撐開(kāi),#footer層就自動(dòng)下移。這樣就實(shí)現(xiàn)了高度的自適應(yīng)。 另外值得注重的是:#menu和#content都是浮動(dòng)在頁(yè)面右面"FLOAT: right;",#sidebar是浮動(dòng)在#menu層的左面"FLOAT: left;",這是浮動(dòng)法定位,還可以采用絕對(duì)定位來(lái)實(shí)現(xiàn)這樣的效果。 這個(gè)方法存在另一個(gè)問(wèn)題,就是側(cè)列#sidebar的背景無(wú)法百分之百。一般的解決辦法就是用body的背景色來(lái)填布滿(mǎn)。(不能使用#mainbox的背景色,因?yàn)樵贛ozilla等瀏覽器中#mainbox的背景色失效。) 好了,主要的框架已經(jīng)搭建完畢,剩下的工作只是往里面添磚加瓦。假如你希望嘗試其他布局,推薦看看以下文章: CSS布局16例 onestab:三欄復(fù)合布局演示
onestab:自由伸展的三欄式版面
相關(guān)Web標(biāo)準(zhǔn)教程:
- Web標(biāo)準(zhǔn):需要正確的使用H1~ H6標(biāo)簽
- 五個(gè)WEB標(biāo)準(zhǔn)中必須注意的地方
- 做到結(jié)構(gòu)(XHTML),表現(xiàn)(CSS),行為(JavaScript)的分離
- CSS標(biāo)準(zhǔn):HTML標(biāo)簽元素的關(guān)閉
- Web標(biāo)準(zhǔn)之路 勿使用W3C廢棄的元素
- CSS布局 聲明文檔類(lèi)型描述(DTD)
- DIV CSS\讓搜索引擎蜘蛛不再累
- 用XHTML+CSS創(chuàng)建基于Web標(biāo)準(zhǔn)的網(wǎng)頁(yè)
- XHTML+CSS創(chuàng)建基于Web標(biāo)準(zhǔn)的網(wǎng)站
- DIV+CSS對(duì)SEO的幫助
- 淺析什么是Web標(biāo)準(zhǔn) 及其前景
- CSSer新手寄語(yǔ):開(kāi)始標(biāo)準(zhǔn)之路
Web標(biāo)準(zhǔn)教程Rss訂閱Div+Css教程搜索
Web標(biāo)準(zhǔn)教程推薦
- 學(xué)習(xí)Div CSS從何入手技術(shù)
- JavaScriptDom編程學(xué)習(xí)書(shū)籍選擇
- 學(xué)習(xí)完全掌握純CSS布局網(wǎng)頁(yè)
- WEB前端:關(guān)于項(xiàng)目管理的思考
- js和css在IE與FF下的一些知識(shí)
- 采訪Eric Meyer的10個(gè)問(wèn)題
- CSS代碼結(jié)構(gòu)初探:DOCTYPE文檔類(lèi)型及瀏覽器的模式
- web標(biāo)準(zhǔn)的商業(yè)價(jià)值
- CSS應(yīng)用常見(jiàn)問(wèn)題大總結(jié)
- 常用的Web標(biāo)準(zhǔn)開(kāi)發(fā)編輯器
猜你也喜歡看這些
- CSS網(wǎng)頁(yè)布局時(shí)常犯的幾種小錯(cuò)誤
- CSSHack代碼范例:兼容IE5.0、IE5.5、IE6.0、IE7.0、FF1.5、FF2.0
- CSS實(shí)例:list-style-type在IE與FF中奇怪的現(xiàn)象解析
- CSS布局實(shí)例:上中下三行,中間自適應(yīng)
- IE7beta2的CSS兼容性
- IE中文字結(jié)尾出現(xiàn)重復(fù)跳字的解決辦法
- IE、Nascape環(huán)境中CSS的顯示差別
- IE中怎么會(huì)出現(xiàn)雙倍邊距?
- CSS的BUG:IE6中一個(gè)奇怪的現(xiàn)象!
- JS的IE和FF兼容性問(wèn)題的匯總小結(jié)
- 相關(guān)鏈接:
- 教程說(shuō)明:
Web標(biāo)準(zhǔn)教程-WEB標(biāo)準(zhǔn)教程第10天:自適應(yīng)高度
。