html - 页脚不在表单后停留在页面底部

Question

我在联系页面上放置页脚时遇到问题。在我网站的每个其他页面上，页脚都正确放置在页面底部，但由于某种原因，页脚位于我的表单上方，甚至覆盖了第一个输入框。有人可以帮帮我吗？

这是我的联系表的代码:

 footer {
	display: block;
    clear: both;
    font-size: 0.8em;
    height: 50px;
    text-align: center;      
	width:960px;	
	margin: auto;
	position: absolute;
    }

    footer .footer-wrapper {
    margin: 0;
    padding:  3px 20px;
    }

    ul#social li {
    display: inline;
    list-style: none;
    }

    ul#social li a {
        color: #999;
        text-decoration: none;
    }

    a.facebook, a.twitter {
        display: block;
        float: left;
        height: 24px;
        padding-left: 17px;
        text-indent: -9999px;
        width: 16px;
    }

 <section>
    <div>
	<form name="customerForm" method="post" action="?">
		<table cellspacing="3" cellpadding="5" border="0" style="width: 95%;" align="center">
		<tr>
			<td>Name: </td>
			<td><input type="text" name="cusName" size="25" value="<?php echo $fullName; ?>" /></td>
		</tr>
		<tr>
			<td>Email: </td>
			<td><input type="text" name="cusEmail" size="30" value="<?php echo $emailAddress; ?>" /></td>
		</tr>
		<tr>
			<td>Mobile: </td>
			<td><input type="text" name="cusMobile" size="25" value="<?php echo $mobilePhone; ?>" /></td>
		</tr>
		<tr>
			<td>Enquiry: </td>
			<td><textarea name="posting" cols="52" rows="25"><?php echo $posting; ?></textarea></td>
		</tr>
		<tr>
			<td colspan="2"><input type="submit" name="submit" value="Send" />&nbsp;
			<input type="reset" name="reset" value="Clear Form"/></td>
		</tr>
	</form>
	
    </div>
    </section>
  <footer>
            <div class="footer-wrapper">
                <div class="float-left">
                    <p>&copy; My-Com Computers</p>
                </div>
                <div class="float-right">
                    <ul id="social">
                        <li><a href="http://facebook.com" class="facebook">Facebook</a></li>
                        <li><a href="http://twitter.com" class="twitter">Twitter</a></li>
                    </ul>
                </div>
            </div>
        </footer>
    

Answer 1

您错过了表格关闭标记您的 html </table>

 <section>
 <div>
 <form name="customerForm" method="post" action="?">
<table cellspacing="3" cellpadding="5" border="0" style="width: 95%;" align="center">
<tr>
    <td>Name: </td>
    <td><input type="text" name="cusName" size="25" value="<?php echo $fullName; ?>" /></td>
</tr>
<tr>
    <td>Email: </td>
    <td><input type="text" name="cusEmail" size="30" value="<?php echo $emailAddress; ?>" /></td>
</tr>
<tr>
    <td>Mobile: </td>
    <td><input type="text" name="cusMobile" size="25" value="<?php echo $mobilePhone; ?>" /></td>
</tr>
<tr>
    <td>Enquiry: </td>
    <td><textarea name="posting" cols="52" rows="25"><?php echo $posting; ?></textarea></td>
</tr>
<tr>
    <td colspan="2"><input type="submit" name="submit" value="Send" />&nbsp;
    <input type="reset" name="reset" value="Clear Form"/></td>
</tr>
</table><!-- new added-->
</form>

</div>
</section>

这是你的输出 https://jsfiddle.net/mxmd5jq9/