Question

所以，我现在已经尝试了一段时间来弄清楚如何正确定位页脚。我在这里浏览了一些已经问过的问题，我发现了一些我实施的想法，但这并没有让我的页脚工作。

这是基本的解释。我为我的页脚编写了代码。问题是如果帖子不长，页脚会在页面中“飞”。我正在编写（更好的说是重写）从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;
}

单个帖子视图（不好，你看到页脚左下方留有空白区域）： single post http://easycaptures.com/fs/uploaded/836/0399596165.png 填写整页的帖子很少（好，页脚低于分页）： full view http://easycaptures.com/fs/uploaded/836/4115186425.png

另一方面，当我将位置设置为固定时，我有这个溢出： Bug http://easycaptures.com/fs/uploaded/836/1684455056.png

如何让我的代码工作正常，如图所示（好）？

编辑：对于那些说改变位置的人，我已经尝试了所有的位置属性（静态，绝对，固定，相对，继承）。

这是我的容器代码：

#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>

Answer 1

您的意思是粘性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 */
}

Answer 2

我认为你所寻找的是一个粘性页脚。 Ryan Faits有一些明确的指示here

Answer 3

尝试将位置更改为绝对位置：

#footer {
       position: absolute;
       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;

}

演示：http://jsfiddle.net/JE5fn/1/

Answer 4

来自CSS技巧：http://css-tricks.com/snippets/css/sticky-footer/

<div class="page-wrap">

  Content!

</div>

<footer class="site-footer">
  I'm the Sticky Footer.
</footer>


* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
  height: 142px; 
}
.site-footer {
  background: orange;
}

页脚没有显示我想要的方式

4 个答案: