Bootstrap, jumbotron和sticky footer

我的头版上有一个巨型电子烟, 效果很好。我的页脚很粘, 而且效果很好。直到我把它们放在一起。包裹类破坏了超大型飞机, 但将其取出却破坏了页脚。内容也迷失在那里的混乱中。显然, 在使用超大屏幕时, 从技术上讲, 我不需要页脚固定在底部, 因为超大屏幕会将页脚推到底部, 但对于其他没有大屏幕的页面, 我需要它。

另外, 在任何人尝试使用固定页脚回答之前, 这根本不是我想要的。

小提琴

html, body {
            height: 100%;
            margin: 0;
        }

        .wrap {
            min-height: 100%;
            width: 100%;
        }

        .footer {
            position: absolute;
            width: 100%;
            margin-top:-150px;
            height: 150px;
            background: orange;
        }

        .jumbotron {
            background-color: inherit;
            position: relative;
            height: 100%;
        }

        .container-full-bg {
            width: 100%;
            height: 100%;
            max-width: 100%;
            background-position: center;
            background-size: cover;
            background-color: red;
        }

            .container-full-bg .container, .container-full-bg .container .jumbotron {
                height: 100%;
                width: 100%;
            }

    <div class="wrap">

        <div class="container-full-bg">
            <div class="container">
                <div class="jumbotron">
                    <div class="row">
                        <div class="col-sm-12">my jumbotron</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    content<br/>content<br/>content<br/>content<br/>
content<br/>content<br/>content<br/>content<br/>content<br/>
                </div>
            </div>
        </div>


    </div><!--/wrap-->

    <div class="footer">my footer</div>

#1

这就是我最终得到的…

由于我使用的是Wordpress, 因此我决定(即使我不想)检查我们是否在首页上, 并在需要的地方添加必要的样式表和div：

已添加到文档开头的header.php中。

<?php
if(!is_front_page()) {
    echo '<link rel="stylesheet" type="text/css" href="'
    . get_template_directory_uri() . '/stickyfooter.css" />';
} ?>


...

然后, 如果我们不在首页上, 我就添加包裹

<?php if(!is_front_page()){
    //wrap the content only if we're not on the front page.
    //this is to push the sticky footer down.
    echo '<div class="wrap">';
}

?>


...

在footer.php中, 我在实际页脚之前关闭wrap div

stickyfooter.css：

.wrap {
    min-height: 100%;
    width: 100%;
    margin-bottom: -246px;
}

.wrap:after {
    content: "";
    display: block;
    height:246px;
}

 .footer {
    clear: both;
    height: 246px;
    margin-top: -246px;
 }

所以你有它。根据页面的布局, 我向页面提供了他们喜欢的代码。