在使用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技术专栏
公众号
事业单位
当前位置：
公考类
招聘类
各类考试
