快捷導(dǎo)航

DIV+CSS網(wǎng)頁(yè)另類上下布局的實(shí)例代碼

更新時(shí)間：2008年10月10日 01:02:59 作者：

在論壇里看到一位朋友在問(wèn)一個(gè)上下2個(gè)內(nèi)容框的，寬度為100%的布局方式，然后自己也就嘗試了一下，發(fā)現(xiàn)了幾個(gè)問(wèn)題的存在

先說(shuō)說(shuō)在嘗試的過(guò)程發(fā)現(xiàn)的幾個(gè)問(wèn)題
1、盒模型問(wèn)題
相信玩重構(gòu)或者說(shuō)是DIV+CSS的朋友應(yīng)該都知道這個(gè)東西，廢話不多說(shuō)，不知道而有興趣可以去網(wǎng)上搜索一下。這里我提到這個(gè)是因?yàn)檫@個(gè)布局是用百分比來(lái)控制的，所以當(dāng)加對(duì)邊框加上1px的邊后，就不好減回來(lái)，我是舍棄了上邊的邊框樣式。

2、溢出問(wèn)題
這個(gè)問(wèn)題只要對(duì)overflow做hidden就可以了，防止內(nèi)容過(guò)長(zhǎng)而溢出。剛剛開(kāi)始的時(shí)候可以對(duì)html跟body的overflow加一個(gè)hidden屬性。Blank 告訴我，IE默認(rèn)是有滾動(dòng)條的寬度（這個(gè)偶知道），而FF是沒(méi)有的（這個(gè)偶就不知道了）。

基本上也就這樣，代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>上下層測(cè)試</title> <style type="text/css">  </style> </head> <body> <div   class="vvxyksv9kd"   id="bodyDiv"> <div   class="vvxyksv9kd"   id="topDiv"><h3>上面的</h3> <br><br> <br><br> <br><br> <br><br> <br><br> <br><br> <br><br> <br><br> <br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br /><br><br><br><br> </div> <div   class="vvxyksv9kd"   id="bottomDiv"><h3>下面的</h3></div> </div> </body> </html> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]