HTML 中的粘性页脚未出现在页面底部

Question

我想将页脚放在屏幕底部，在我的索引正文中使用了带有 "wrap" id 的 div，但页脚似乎没有粘在下面它。

请帮我解决这个问题。

我已经包含了我的 index.php、footer.php 和 css.php 文件

index.php

<?php include('config/setup.php');?>
<!DOCTYPE html>
<html>
    <head>
        <title><?php echo $page['title'].' | '.$site_title; ?></title>

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <?php include('config/css.php'); ?>
        <?php include('config/js.php'); ?>


    </head>
    <body>
        <div id="wrap">
            <?php include(D_TEMPLATE.'/navigation.php'); ?>
            <div class="container">
                <h1><?php echo $page['header'];?></h1>
                <?php echo $page['body_formatted']; ?>
            </div>
        </div><!-- END wrap -->

        <?php include(D_TEMPLATE.'/footer.php'); ?>

        <div id="console-debug">
                    <pre>
                    <?php print_r($page); ?>
                    </pre>
        </div>
    </body>
</html>

footer.php

<footer id="footer">
    <div class="container">
        <p>This is my footer</p>
    </div>
</footer><!-- END footer -->

css.php

<?php
//CSS:
?>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- jQuery CSS -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

<style>
    html,
    body {
        height=100%;
        /* The html and body elements cannot have any padding or margin */
    }
    /* Wrapper for page content to push down footer */
    #wrap {
        min-height: 100%;
        height: auto;
        /* Negative indent footer by its height */
        margin: 0 auto -60px;
        /* Pad bottom by footer height */
        padding: 0 0 60px;
    }
    /* Set the fixed height of the footer here */
    #footer {
        width:100%;
        height: 60px;
        background-color: #f5f5f5;
    }
    #btn-debug {
        position: absolute;
    }
    #console-debug{
        position:absolute
    }
</style>

Answer 1

对于粘性页脚，您可以添加此代码

#footer{
position:fixed;
left:0px;
right:0px;
bottom:0px;
width:100%;
z-index:99;
min-height: ;/*According to requirement*/
background-color: ;/*set color whichever you want*/
}

Answer 2

您应该尝试设置您的 position:fixed 所以它不会移动

HTML 中的粘性页脚未出现在页面底部

Sticky Footer in HTML, does not appear at the bottom of the page

html

css

php

sticky-footer