Question

我有一个我正在建设的网站，而且我被困住了。该网站使用bootstrap，无论是否有内容，我都无法让页脚停留在页面底部。 我不希望它留在视口中，我希望它在内容的最后。这是我正在关注的教程，但它不起作用：http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

现在页脚停留在内容的中间。

我有一个理论认为#container id并未涵盖所有#body内容。当我检查元素时，#container和<div class = "jumbotron home"></div>元素之后的<h1>oot</h1>似乎停止了。我不确定为什么会这样，或者即使我是对的。

您可以在此处查看：https://oot-janaaron97.c9users.io

以下是代码：

的style.css

/*

Theme Name: Oot
Author: Deep Space Development Team 
Version: 1.0

*/

/******************************************************************************************

GENERIC STYLES

******************************************************************************************/

body{
    background: #fdfdfd;
}

a{
    color: black;
    text-decoration: none;
}

.jumbotron{
    margin: 0 !important;
}




/******************************************************************************************

HEADER

******************************************************************************************/

.navbar-default{

}

.navbar-nav{
    float: right !important;

}

.navbar-brand{
    color: #333 !important;
}

#logo{
    width: auto;
    height: 30px;
    margin-top: -5px;
}


/******************************************************************************************

FOOTER

******************************************************************************************/

#footer{
    background: deepskyblue;
}

#footer p, #footer a{
    margin-top: 1.6em;
    color: #fff;
}



/******************************************************************************************

HOME

******************************************************************************************/

.home{
    background:linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(https://images.unsplash.com/photo-1457213453084-d386450c6252?crop=entropy&dpr=2&fit=crop&fm=jpg&h=700&ixjsv=2.1.0&ixlib=rb-0.3.5&q=50&w=1300);
    background-size: cover;
    background-position: center;
    height: 40em;


}


/******************************************************************************************
MISC.
******************************************************************************************/

.center{
    text-align: center;
}

.text-wrap{
    word-wrap: break-word;
}



/******************************************************************************************************

CODE TO KEEP FOOTER ON BOTTOM

******************************************************************************************************/
html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#container {
    min-height:100%;
    position:relative;
}
#header {
    background:#ededed;
    padding:10px;
}
#body {
    padding-bottom:100px; /* Height of the footer element */
}
#footer {
    background:#ffab62;
    width:100%;
    height:100px;
    position:absolute;
    bottom:0;
    left:0;
}

/******************************************************************************************

MEDIA-QUERY

******************************************************************************************/

@media (max-width: 768px) {

    .nav li a{
        margin-left: 15px;
    }

    .navbar-nav{
        float: none !important;

    }

    .navbar-nav li{
        width: 100%;
        text-align: center;
    }



}

的header.php

<!DOCTYPE html>
<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>


        <!-- Bootstrap-->
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
        <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

        <!-- Custom css file -->
        <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style.css" />

        <title>Oot</title>
    </head>

    <body>
        <div id = "container">

            <div id = "header">
                <?php include 'menu.php'; ?>
            </div><!--end of #header-->

            <div id = "body">

页-home.php

<?php get_header();?>


                <div class = "jumbotron home"></div>

                <h1 class = "center text-wrap">Oot</h1>


                <div class = "col-md-4">
                    <p class = "text-wrap">fkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsf</p><p class = "text-wrap">fkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsf</p>
                </div>

                <div class = "col-md-4">
                    <p class = "text-wrap">fkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsf</p><p class = "text-wrap">fkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsf</p>
                </div>

                <div class = "col-md-4">
                    <p class = "text-wrap">fkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsf</p><p class = "text-wrap">fkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsffkdjfkdsfjdsfja;dfjdskjafkdsjfkdsjfkdsljfkldsfdsfdsf</p>
                </div>


            </div>


<?php get_footer();?>

footer.php

            <div id = "footer">

                    <div class = "col-md-4">
                        <h1>TEST</h1>
                        <p>heloo wookfodfkdf;askfdsafasfasdfdsafsf</p>
                    </div>

                    <div class = "col-md-4">
                        <h1>TEST</h1>
                        <p>heloo wookfodfkdf;askfdsafasfasdfdsafsf</p>
                    </div>

                    <div class = "col-md-4">
                        <h1>TEST</h1>
                        <p>heloo wookfodfkdf;askfdsafasfasdfdsafsf</p>
                    </div>


            </div>

        </div>

    </body>
</html>

谢谢！

Answer 1

尝试将#footer css更改为以下内容：

#footer {
    background: #ffab62;
    width: 100%;
    height: 100%;
    /* position: absolute; - remove this*/
    /* bottom: 0; - remove this*/
    /* left: 0; - remove this*/
}

然后页脚会自然地位于<body>内容结束的任何地方

===

更新的答案

尝试将clearfix类添加到正文

<div id="body" class="clearfix">

将页脚推到页面底部（引导程序）

1 个答案: