因此,我已经尝试了一段时间,以弄清楚如何正确放置页脚。我在SO上浏览了一些已经提出的问题,并且发现了一些实现的想法,但是这些想法并没有使我的脚步工作。
这是基本说明。我已经为页脚写了下面的代码。问题是如果发布不长,页脚中的页脚就会“飞起来”。我正在编写(最好是重写)从C到PHP的简单CMS,但我并没有涉足CSS或总体设计。
这是代码:
#footer {
position: static;
background: #346 repeat scroll 0 0;
border-top:3px solid #CCCCCC;
clear: both;
color:#FFFFFF;
font-size:x-small;
line-height:100%;
margin: 2em 0 0;
width: 100%;
text-align: center;
padding:3px 10px 10px;
bottom: 0;
}
单个帖子视图(不好,您会在页脚下方看到空白):
(来源:easycaptures.com)
很少有文章可以填满整页(良好的页脚波纹分页):
(来源:easycaptures.com)
另一方面,当我将位置设置为固定时,将发生以下溢出:
(来源:easycaptures.com)
如何使我的代码正常工作(如图片所示)(良好)?
编辑:对于那些说要改变立场的人,我已经尝试过所有立场属性(静态,绝对,固定,相对,继承)。
这是我的容器代码:
#contener {
margin: 0 auto;
text-align: left;
width: 100%;
}
其他:
body, html, #menu, img, a img, form, fieldset {
margin:0;
padding:0;
font-size: 12px;
}
当我将位置设置为“绝对”时,我得到了这个picture。
这是我的分页+页脚的完整代码:
<?php
$currentPage = 1;
if(isset($_GET['page'])){
$currentPage = protect_sqli($_GET['page']);
}
$e = $currentPage * $num_psts; // end post
$p = $e - $num_psts+1; // start post
$i = 0;
// Create a connection
$conS = mysqli_connect($hName, $dbUser) or die(mysql_error());
// Select a specific database
mysqli_select_db($conS, $dbName) or die(mysql_error());
// Query creating
$result = mysqli_query($conS, "SELECT * FROM posts ORDER BY dat DESC, tim DESC");
while($row = mysqli_fetch_array($result))
{
$i++;
if($i >= $p && $i <= $e)
{
$postId = protect_sqli($row['slug']);
readfile('p/' . $postId . '.php');
}
}
?>
<center>
<p>
<?php
$result = mysqli_query($conS, "SELECT id FROM posts");
$nPosts = mysqli_num_rows($result); // number of posts
mysqli_close($conS);
echo "Pages: ";
$pages = $nPosts/$num_psts; // number of pages
for($i = 1; $i < $pages+1; $i++)
{
if($i == $currentPage)
{
echo "<strong>".$i."</strong> ";
}
else
{
echo "<a href=\"?page=". $i ."\">". $i ."</a> ";
}
}
?>
</p>
</center>
<div id="footer">
<?php readfile(__DIR__ . "/mvc/fe/footer.php"); ?>
</div>
</div>
footer.php:
Made by dn5 | <a href="https://github.com/dn5/cblogphp" target="_blank"><font color="#e1c1aa">cblogphp</font></a>
最佳答案
您是指始终位于网站底部的粘性footer吗?
CSS如下所示:
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 155px; /* .push must be the same height as .footer */
}