在使用dreamweaver或者frontpage來(lái)制作html網(wǎng)頁(yè)時(shí)，我們有可能會(huì)遇到這樣的問題：在軟件中好好的網(wǎng)頁(yè)一旦放到瀏覽器中，就會(huì)在網(wǎng)頁(yè)的下方莫名其妙的多出來(lái)或多或少的空白。那么這種空白又要怎么去消除呢？
起先我以為只要在網(wǎng)頁(yè)的代碼中加一個(gè)css來(lái)約束一下網(wǎng)頁(yè)的高度就行了，事實(shí)證明這樣是行不通的。
原因：
首先我們要知道，用軟件來(lái)寫網(wǎng)頁(yè)的話，大多數(shù)都是通過(guò)圖形化的界面來(lái)“堆”網(wǎng)頁(yè)，這樣堆網(wǎng)頁(yè)的話，在創(chuàng)建層或者表格的時(shí)候，軟件給層或者表格定義的高度往往會(huì)超出我們所想要的高度，但是在軟件上是看不出來(lái)的；然而，當(dāng)我們?cè)跒g覽器中打開網(wǎng)頁(yè)的時(shí)候，我們就會(huì)發(fā)現(xiàn)，軟件中不存在的空白就會(huì)在瀏覽器中顯示出來(lái)。
而不能僅僅通過(guò)添加一個(gè)html{height：xxpx;}來(lái)約束網(wǎng)頁(yè)的高度，是因?yàn)樵诰W(wǎng)頁(yè)中，嵌套在元素內(nèi)部的其他元素的特性會(huì)具有更高的優(yōu)先級(jí)。例如：你如果在同一個(gè)網(wǎng)頁(yè)中有如下代碼：body{font-size：10px;}p{font-size：9px;}那么該網(wǎng)頁(yè)<p>元素中字體大小就應(yīng)該是9px而不是10px了。由于這個(gè)規(guī)則的存在，網(wǎng)頁(yè)中層的總高度大于html{height：xxpx;}中xx的值時(shí)，html{height：xxpx;}也就自然沒有作用了。
解決方式：
像這種用軟件寫的網(wǎng)頁(yè)代碼，通過(guò)去尋找css中關(guān)于層或者表格高度的定義，然后修改高度的值，就能去掉網(wǎng)頁(yè)中不必要的空白了。
代碼如下:
<!doctypehtmlpublic-//w3c//dtdxhtml1.0transitional//enhttp://www.***.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
<htmlxmlns=http://www.***.org/1999/xhtml>
<head>
<metahttp-equiv=content-typecontent=text/html;charset=utf-8/>
<title>無(wú)標(biāo)題文檔</title>
<styletype=text/css>
body
{
margin:0px;
padding:0px;
margin-top:60px;
margin-bottom:60px;
}
#div_nav_zone_right
{
position:absolute;
float:right;
z-index:3;
width:120px;
height:100px;
right:0px;
top:332px;
background-color:#999;
}
#div_nav_zone_right_bottom
{
position:absolute;
float:right;
z-index:3;
width:120px;
height:100px;
right:0px;
top:532px;
background-color:#ccc;
}
#div_ul
{
position:fixed;
height:50px;
}
ul,li
{
margin:0px;
}
li
{
list-style:none;
}
</style>
<scripttype=text/javascriptsrc=js/jquery.js></script>
<scripttype=text/javascript>
$(function()
{
movediv();//頁(yè)面初始化執(zhí)行
$(window).scroll(function(){
movediv();
moverightbottomdiv();
});
});
//右側(cè)居中
functionmovediv()
{
varscrolltop=$(document).scrolltop();//滾動(dòng)條上端隱藏的高度
varclientheight=$(window).height();//網(wǎng)頁(yè)內(nèi)容區(qū)高度
//設(shè)置位置為
varhei=$(#div_nav_zone_right).css(height);
hei=hei.replace(px,);
varnewposy=scrolltop+(clientheight-hei)/2;
$(#div_nav_zone_right).css(top,newposy+px);
}
//右側(cè)居下100像素
functionmoverightbottomdiv()
{
varscrolltop=$(document).scrolltop();//滾動(dòng)條上端隱藏的高度
varclientheight=$(window).height();//網(wǎng)頁(yè)內(nèi)容區(qū)高度
//設(shè)置位置為
varhei=$(#div_nav_zone_right_bottom).css(height);
hei=hei.replace(px,);
varnewposy=clientheight+scrolltop-hei-100;
$(#div_nav_zone_right_bottom).css(top,newposy+px);
}
</script>
</head>
<body>
1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10<br/>
<p>sd</p>
<p>f</p>
<p></p>
<p>ads</p>
<p>f</p>
<p>ads</p>
<p>
<inputtype=buttonname=buttonid=buttonvalue=提交onclick=clk()/>
</p>
<p>ad</p>
<p>sfas
d
as
d
sa
d
</p>
<p></p>
<p>ads</p>
<p>f</p>
<p>ads</p>
sad
sa
d
a
d
a
d
a
<divid=div_nav_zone_right>
<ul>
<li>邊欄菜單1</li>
<li>邊欄菜單2</li>
<li>邊欄菜單3</li>
<li>邊欄菜單4</li>
</ul>
</div>
<divid=div_nav_zone_right_bottom>
<ul>
<li>邊欄菜單1</li>
<li>邊欄菜單2</li>
<li>邊欄菜單3</li>
<li>邊欄菜單4</li>
</ul>
</div>
</body>
</html>