页脚正在划分内容

Question

我在页面上有一个页脚，它将内容放在顶部，然后将其中的一些放在底部。我不知道为什么这样做，我尝试将clear:both;放在mainWrap和footer上，但它没有帮助。

HTML -

<div id="mainWrap">
 <h1>Welcome to ASA.</h1>
 <hr class="faded">
 <h3>Register</h3>
 <form action="register.php" method="post">
  <table>
   <tr>
    <td><p>Username:</p></td>
    <td><input type="text" name="user" id="user" maxlength="50" /></td>
   </tr>
   <tr>
    <td><p>Password:</p></td>
    <td><input type="password" name="password" id="password" maxlength="50" /></td>
   </tr>
   <tr>
    <td><p>Repeat Password:</p></td>
    <td><input type="password" name="rpassword" id="rpassword" maxlength="50" /></td>
   </tr>
   <tr>
    <td><p>Email:</p></td>
    <td><input type="text" name="email" id="email" maxlength="50" /></td>
   </tr>
   <tr>
    <td><p>Skype Username:</p></td>
    <td><input type="text" name="skypeuser" id="skypeuser" maxlength="50" /></td>
   </tr>
   <tr>
    <td><p>First Name:</p></td>
    <td><input type="text" name="fname" id="fname" maxlength="50" /></td>
   </tr>
   <tr>
    <td><p>Last Name:</p></td>
    <td><input type="text" name="lname" id="lname" maxlength="50" /></td>
   </tr>
   <tr>
    <td><input type="submit" value="Register" id="submit" maxlength="50" /></td>
   </tr>
  </table>
 </form>
</div>
<div id="bottom"></div>

CSS -

#mainWrap {
    width:960px;
    height:auto;
    margin:0px auto;
    position:relative;
    clear:both;
}

#bottom {
    position:absolute;
    clear:both;
    left:0;
    bottom:0; 
    background-color:#fff;
    height:160px;
    width:100%;
    -webkit-box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.75);
}

发生什么事情的图片 -

Answer 1

#bottom {}问题出在这里，你的位置是absolute，bottom:0还有height:160px，它将页脚粘贴到高度为160px的底部。

Answer 2

操作问题是<div id="bottom"></div>的绝对位置是更新的jsFiddle。 http://jsfiddle.net/HxCL9/