在使用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//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>无标题文档</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();//页面初始化执行
$(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=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>