由于有表格,页脚不会停留在页面底部 [英] Footer wont stay at bottom of page due to a table
问题描述
我正在创建一个简单的内容管理系统,我的CSS和布局适用于除创建表之外的所有内容,然后以某种方式将页脚部分移动到其上方的包装器部分中.甚至表下方的文本也会在表上方输出.
I'm making a simple content management system, my CSS and layout works for everything apart from I make a table which then somehow moves the footer section to move into a wrapper sort of section above it. Even text below table gets output above the table.
我的基本布局...
<?php
session_start();
//nav bar //top part of page which fully works etc
include "header.php";
?>
<section class= "mainSection">
<section class = "subMain">
<p> this should be above </p>
<?php include "/mysql/catgoryShow.php"; ?>
<p> this should be below the table </p>
</section>
</section>
<footer class = "mainFooter">
</footer>
</body>
我的CSS重要部分...
my important parts of the css...
section.mainSection{
margin-left: 4%;
margin-right:4%;
min-height: 1000px;
background-color: #ffffff;
border-left-style:solid;
border-left-color:#DAE3ED;
border-left-width:5px;
border-right-style:solid;
border-right-color:#DAE3ED;
border-right-width:5px;
}
section.subMain{
margin-left: 10%;
margin-right: 10%;
padding-top:10%;
padding-bottom: 2%;
}
我的页脚CSS
footer.mainFooter{
margin-left: 4%;
margin-right:4%;
height: 75px;
background-color:#78B0F0;
border-top-style:solid;
border-top-color:#DAE3ED;
border-top-width:5px;
}
最后是我的桌子
<?php
$result=mysql_query($query);
$num=mysql_numrows($result);
echo "<p>'$query' returns $num rows:<p>\r\n";
?>
<table border="0" cellspacing="2" cellpadding="2">
<tr>
<td><font face="Arial, Helvetica, sans-serif">|Product ID|</font></td>
<td><font face="Arial, Helvetica, sans-serif">|Product Name|</font></td>
<td><font face="Arial, Helvetica, sans-serif">Product Category|</font></td>
<td><font face="Arial, Helvetica, sans-serif">Product Minimum Age|</font></td>
<td><font face="Arial, Helvetica, sans-serif">Product Discription|</font></td>
<td><font face="Arial, Helvetica, sans-serif">Product Price|</font></td>
<td><font face="Arial, Helvetica, sans-serif">Product Quantily Available|</font></td>
<td><font face="Arial, Helvetica, sans-serif">View Product Page|</font></td>
</tr>
<?php
$i=0;
while ($i < $num) {
$f1=mysql_result($result,$i,"ProductID");
$f2=mysql_result($result,$i,"ProductName");
$f3=mysql_result($result,$i,"ProductCategory");
$f4=mysql_result($result,$i,"SuitableAge");
$f5=mysql_result($result,$i,"ProductDiscription");
$f6=mysql_result($result,$i,"ProductPrice");
$f7=mysql_result($result,$i,"ProductAvailable");
?>
<tr>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f1; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f2; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f3; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f4; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f5; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f6; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f7; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f7; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><a href="../cw/itemPage.php?id=<?php echo $f1?>">View Details</a></font></td>
</tr>
<?php
$i++;
}
echo "<p>'$query' returns $num rows:<p>\r\n";
?>
显示查询的两个回显都以某种方式在表之前打印出来:/
Both of the echos that show the query get printed before the table somehow aswell :/
推荐答案
如前所述-您必须使用适当的</table>
标记关闭该表元素.在极少数情况下,表也可能继承一些浮动值,因此footer.mainFooter { clear: both; }
应该可以解决此问题.
As noted before - you must close that table element with the appropriate </table>
tag. In rare cases the table might also be inheriting some floating values so footer.mainFooter { clear: both; }
should fix that.
这篇关于由于有表格,页脚不会停留在页面底部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!