如果我們想在3列布局的最后加一行頁(yè)腳，放版權(quán)之類的信息。就遇到必須對(duì)齊3列底部的問(wèn)題。在table布局中，我們用大表格嵌套小表格的方法，可以很方便對(duì)齊三列；而用div布局，三列獨(dú)立分散，內(nèi)容高低不同，就很難對(duì)齊。其實(shí)我們完全可以嵌套div，把三列放進(jìn)一個(gè)DIV中，就做到了底部對(duì)齊。下面是實(shí)現(xiàn)例子(白色背景框模擬一個(gè)頁(yè)面)：

專注于為中小企業(yè)提供成都網(wǎng)站制作、成都做網(wǎng)站、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)潁泉免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了成百上千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

Body
這里是#header{MARGIN:0px;BORDER:0px;BACKGROUND:#ccd2de;WIDTH:580px;HEIGHT:60px;}
這里是#mainbox{MARGIN:0px;WIDTH:580px;BACKGROUND:#FFF;}包含了#menu,#sidebar和#content
這里是#menu{FLOAT:right;MARGIN:2px0px2px0px;PADDING:0px0px0px0px;WIDTH:400px;BACKGROUND:#ccd2de;}
這里是#sidebar{FLOAT:left;MARGIN:2px2px0px0px;PADDING:0px;BACKGROUND:#F2F3F7;WIDTH:170px;}，背景顏色用的是#main的背景色

這里是#content{FLOAT:right;MARGIN:1px0px2px0px;PADDING:0px;WIDTH:400px;BACKGROUND:#E0EFDE;}

這里是主要內(nèi)容，根據(jù)內(nèi)容自動(dòng)適應(yīng)高度

這里是主要內(nèi)容，根據(jù)內(nèi)容自動(dòng)適應(yīng)高度

這里是主要內(nèi)容，根據(jù)內(nèi)容自動(dòng)適應(yīng)高度

這里是#footer{CLEAR:both;MARGIN:0px0px0px0px;PADDING:5px0px5px0px;BACKGROUND:#ccd2de;HEIGHT:40px;WIDTH:580px;}。
這個(gè)例子的頁(yè)面主要代碼如下：

<divid=''header''></div>
<divid=''mainbox''>
<divid=''menu''></div>
<divid=''sidebar''></div>
<divid=''content''></div>
</div>
<divid=''footer''></div>

具體樣式表都寫在相應(yīng)版塊里了。重點(diǎn)在于#mainbox層嵌套了#menu,#sidebar和#content三個(gè)層。當(dāng)#content的內(nèi)容增加，#content的高度就會(huì)增高，同時(shí)#mainbox的高度也會(huì)撐開，#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)填充滿。(不能使用#mainbox的背景色，因?yàn)樵贛ozilla等瀏覽器中#mainbox的背景色失效。)

好了，主要的框架已經(jīng)搭建完畢,剩下的工作只是往里面添磚加瓦。如果你希望嘗試其他布局，推薦看看以下文章:

CSS布局16例
onestab:三欄復(fù)合布局演示
onestab:自由伸展的三欄式版面
Tips:[onestab的''P.I.E''專題]還有更多精彩介紹，推薦去看看。

網(wǎng)頁(yè)標(biāo)題：css中網(wǎng)頁(yè)自適應(yīng)高度的設(shè)計(jì)
瀏覽路徑：http://chinadenli.net/article12/ecchdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、商城網(wǎng)站、定制網(wǎng)站、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)