页脚不会留在页面底部由于表

我正在做一个简单的内容管理系统，我的CSS和布局适用于除了我做一个表然后以某种方式移动页脚部分移动到一个包装类上面的部分。即使表格下方的文本也会在表格上方输出。页脚不会留在页面底部由于表

我的基本布局...

 <?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的重要组成部分......

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"; 


?>

无论是显示查询的回声获取表莫名其妙藏汉前打印：/

来源

2012-12-31 Fred Jones

我们需要* generated * HTML，原始的PHP不能帮助我们。请制作一个http://jsfiddle.net/。我没有在任何地方看到关闭表格标签。 – cimmanon

LOl我是一个白痴欢呼声，忘记了关闭表标签 –

对于主页脚的CSS，添加position:relative和bottom:0。它将始终固定在底部。

来源

2012-12-31 13:41:26 GautamJeyaraman

正如@cimmanon关闭此<table>标签将是一个非常好的开始

来源

2012-12-31 13:42:43 tchap

，并可能之后添加一个
–

...并摆脱这些''标签以及。我们在2013年...几乎... – tchap

正如前面提到的注意 - 你必须关闭该表元素与适当的</table>标签。在极少数情况下，表格可能也会继承一些浮动值，所以footer.mainFooter { clear: both; }应该修复这个问题。

来源

2012-12-31 13:49:19 rthor

页脚不会留在页面底部由于表

回答

相关问题