在使用dreamweaver或者frontpage來制作HTML網頁時，我們有可能會遇到這樣的問題：在軟件中好好的網頁一旦放到瀏覽器中，就會在網頁的下方莫名其妙的多出來或多或少的空白。那么這種空白又要怎么去消除呢？
起先我以為只要在網頁的代碼中加一個CSS來約束一下網頁的高度就行了，事實證明這樣是行不通的。
原因：
首先我們要知道，用軟件來寫網頁的話，大多數都是通過圖形化的界面來“堆”網頁，這樣堆網頁的話，在創建層或者表格的時候，軟件給層或者表格定義的高度往往會超出我們所想要的高度，但是在軟件上是看不出來的；然而，當我們在瀏覽器中打開網頁的時候，我們就會發現，軟件中不存在的空白就會在瀏覽器中顯示出來。
而不能僅僅通過添加一個html{height：XXpx;}來約束網頁的高度，是因為在網頁中，嵌套在元素內部的其他元素的特性會具有更高的優先級。例如：你如果在同一個網頁中有如下代碼：body{font-size：10px;}p{font-size：9px;}那么該網頁<p>元素中字體大小就應該是9px而不是10px了。由于這個規則的存在，網頁中層的總高度大于html{height：XXpx;}中XX的值時，html{height：XXpx;}也就自然沒有作用了。
解決方式：
像這種用軟件寫的網頁代碼，通過去尋找CSS中關于層或者表格高度的定義，然后修改高度的值，就能去掉網頁中不必要的空白了。
代碼如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.***.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.***.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>無標題文檔</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/javascript"src="js/jquery.js"></script>
<scripttype="text/javascript">
$(function()
{
moveDiv();//頁面初始化執行
$(window).scroll(function(){
moveDiv();
moveRightBottomDiv();
});
});
//右側居中
functionmoveDiv()
{
varscrollTop=$(document).scrollTop();//滾動條上端隱藏的高度
varclientHeight=$(window).height();//網頁內容區高度
//設置位置為
varhei=$("#div_nav_zone_right").css("height");
hei=hei.replace("px","");
varnewPosY=scrollTop+(clientHeight-hei)/2;
$("#div_nav_zone_right").css("top",newPosY+"px");
}
//右側居下100像素
functionmoveRightBottomDiv()
{
varscrollTop=$(document).scrollTop();//滾動條上端隱藏的高度
varclientHeight=$(window).height();//網頁內容區高度
//設置位置為
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="button"name="button"id="button"value="提交"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>
更多信息請查看IT技術專欄
版權所有:易賢網
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試