html - 将页脚推到页面底部( Bootstrap )-6ren

html - 将页脚推到页面底部( Bootstrap )

转载作者：行者123 更新时间：2023-11-28 01:13:48

我有一个正在构建的站点，但遇到了困难。该网站使用 Bootstrap ，无论是否有内容，我都无法让页脚停留在页面底部。 我不希望它留在视口(viewport)中，我希望它位于内容的末尾。这是我正在学习的教程，但它不起作用: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

代码如下:

样式.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">

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

谢谢!

最佳答案

尝试将您的#footer css 更改为以下内容:

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

页脚将自然地位于您的 <body> 的任何位置内容结束

===

更新的答案

尝试将 clearfix 的类添加到正文中