-1

コンテンツを取り、その一部を上に配置し、次にその一部を下に配置するページにフッターがあります。なぜこれを行うのかわかりません。と のclear:both;両方を装着しようとしましたが、役に立ちませんでした。mainWrapfooter

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);
}

何が起こっているかの写真 - 何が起こっているかの画像

4

2 に答える 2

1

#bottom {} 問題は、あなたの位置がどこにあり、absoluteフッターを高さ160pxの下部に接着することです。bottom:0height:160px

于 2013-10-03T17:28:55.377 に答える
0

Op 問題<div id="bottom"></div>は、更新された jsFiddle の絶対位置にありました。http://jsfiddle.net/HxCL9/

于 2013-10-03T17:24:02.327 に答える