html - 页脚正在划分内容

Question

我在一个页面上有一个页脚，它正在获取内容并将其中一些放在顶部，然后将一些放在底部。我不知道它为什么这样做，我尝试同时穿上clear:both;themainWrap和 the 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/