我有一个必须有页脚的登录页面，但我不知道为什么我的页脚不显示，这是我的 html 和 css 文件，请有人告诉我出了什么问题？
HTML：
<body>
<!-- Begin Page Content -->
<div id="container">
<form method="POST" id="login">
<label for="name">تلفن همراه :</label>
<input type="tel" required="" title="لطفا شماره همراه خود را به صورت صحیح وارد نمایید" x-moz-errormessage="لط
فا شماره همراه خود را به صورت صحیح وارد نمایید" name="phone" id="phone">
<label for="username">رمز عبور :</label>
<input type="password" required="" id="password" title="رمز عبور را وارد کنید" x-moz-errormessage="رمز عبور را وارد کنید" name="password">
<div id="lower">
<input type="checkbox"><label class="check" for="checkbox">مرا بخاطر بسپار</label>
<input type="submit" value="ورود" ><br />
<a style=" float: right; clear:both; margin-right: 10px;margin-bottom:10px; text-decoration: blink;" href="register.php">ثبتنام نکرده ام</a>
</div>
</form>
</div>
<div class="footer">
<div>
<a href="http://hameja123.ir">همه جا 123</a>
</div>
کلیه حقوق این سایت محفوظ بوده و متعلق به
<a href="http://hameja123.ir">همه جا 123</a>
می‌باشد.
<div style="direction:ltr; color: #ffffff;">hameja123.ir - Copyright © 2013 - All rights reserved by Reza Tanzifi.</div>
</div><!--end footer-->
<!-- End Page Content -->
</body>
CSS：
@import url(animate.css);
/* Selections */
::selection {
color: #fff;
text-shadow: none;
background: #444;
}
::-moz-selection {
color: #fff;
text-shadow: none;
background: #444;
}
/* Basics */
html, body {
width: 100%;
height: 100%;
font-family: "Helvetica Neue", Helvetica, sans-serif;
color: #444;
-webkit-font-smoothing: antialiased;
background-image: url(./images/bg.png);
background-repeat: repeat;
}
#container {
position: fixed;
width: 340px;
height: 280px;
top: 50%;
left: 50%;
margin-top: -140px;
margin-left: -170px;
background: #fff;
border-radius: 3px;
border: 1px solid #ccc;
box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
-webkit-animation-name: bounceIn;
-webkit-animation-fill-mode: both;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-moz-animation-name: bounceIn;
-moz-animation-fill-mode: both;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: linear;
animation-name: bounceIn;
animation-fill-mode: both;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: linear;
}
form {
margin: 0 auto;
margin-top: 20px;
}
label {
color: #555;
display: inline-block;
margin-right: 18px;
padding-top: 10px;
font-size: 14px;
direction: rtl;
float: right;
}
p a {
font-size: 11px;
color: #aaa;
float: right;
margin-top: -13px;
margin-right: 20px;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
transition: all .4s ease;
}
p a:hover {
color: #555;
}
input {
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 12px;
outline: none;
}
input[type=tel],
input[type=password] {
color: #777;
padding-left: 10px;
margin: 10px;
margin-top: 12px;
margin-left: 18px;
width: 290px;
height: 35px;
border: 1px solid #c7d0d2;
border-radius: 2px;
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
transition: all .4s ease;
}
input[type=tel]:hover,
input[type=password]:hover {
border: 1px solid #b6bfc0;
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .7), 0 0 0 5px #f5f7f8;
}
input[type=tel]:focus,
input[type=password]:focus {
border: 1px solid #a8c9e4;
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #e6f2f9;
}
#lower {
background: #ecf2f5;
width: 100%;
height: 69px;
margin-top: 20px;
box-shadow: inset 0 1px 1px #fff;
border-top: 1px solid #ccc;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
input[type=checkbox] {
margin-top: 10px;
float: right;
margin-right: 30px;
}
.check {
margin-left: 3px;
margin-right: 5px;
font-size: 11px;
color: #444;
text-shadow: 0 1px 0 #fff;
float: right;
}
input[type=submit] {
float: left;
margin-left: 20px;
margin-top: 20px;
width: 80px;
height: 30px;
font-size: 14px;
font-weight: bold;
color: #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#acd6ef),to(#6ec2e8));
background-image: -moz-linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
background-image: linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
border-radius: 30px;
border: 1px solid #66add6;
box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5);
cursor: pointer;
}
input[type=submit]:hover {
background-image: -webkit-gradient(linear, left top, left bottom, from(#b6e2ff), to(#6ec2e8));
background-image: -moz-linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
background-image: linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
}
input[type=submit]:active {
background-image: -webkit-gradient(linear, left top, left bottom, from(#6ec2e8), to(#b6e2ff));
background-image: -moz-linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
background-image: linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
}
.footer{
background-color: #555555;
border-top: 1px solid #FFFFFF;
clear: both;
color: #FFFFFF;
font-size: 12px;
height: 64px;
line-height: 19px;
margin-top: -69px;
padding-top: 4px;
position: absolute;
direction: rtl;
font-family: tahoma;
font-size: 13px;
text-align: center;
line-height: 19px;
}
.footer a {
color: #FFFFFF;
text-decoration: none;
}