如何固定页面，在放大以及缩小的时候整体结构固定住，不乱套啊

[ktjamy]

下面代码哪里怎么改才能让.top 的背景颜色（background:#002E68;）撑开整个页面的上班部分啊？原来是宽是980px，但是在显示器大的地方打开页面，不够长，所以改成1500，但要是用点击Ctrl加鼠标滚轴进行缩小的话，上班部分的背景颜色不能撑满上半部分。怎么修改才能不管放大或者缩放页面的时候，背景颜色撑满页面的上半部分啊？
<style>
.form {margin-left:-10px}
.top {float:left;height:49px;width:1500px;overflow:hidden;position:relative;background:#002E68;}
.top h1 {background:url("/images/btn/logo.png") no-repeat scroll left top transparent;float:left;height:20px;width:165px;margin-left:17%;margin-top:14px}
.top ul li {list-style:none;display:inline}
.top ul li a {float:left;border:1px solid #696;color:white}
</style>

<div class="form">
<div class="top">
<h1><a href="#"></a></h1>
<ul>
<li><a href="#">SETTING</a></li>
<li><a href="#">1 NEW MEESAGE</a></li>
<li><a href="#">LOGOUT</a></li>
</ul>
</div>
</div>

[cwz3323]

BODY{width:100%}
.top{width:100%}