代码之家 › 专栏 › 技术社区 › user8132864

HTML中的粘性页脚,不显示在页面底部

sticky-footer css html php

user8132864 · 技术社区 · 7 年前

我想把我的页脚放在屏幕的底部,在我的索引主体上使用了一个带有“wrap”id的div,但页脚似乎没有粘在它下面。

请帮我解决这个问题。

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

2 回复 | 直到 7 年前

Abhijeet 7 年前

对于粘性页脚,您可以添加以下代码

#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*/
}

Mirin 7 年前

你应该试着设置你的位置:固定