Question

我的头版上有一个超大屏幕，效果很好。我有一个粘性的页脚，它也很好用。直到我把它们放在一起。包装类废弃了jumbotron，但它取消了废弃的页脚。内容在某处的混乱中也会丢失。显然，使用jumbotron技术上我不需要将脚踏板固定在底部，因为jumbotron会把它推到底部，但我需要它用于其他不具备jumbotron的页面。

此外，在任何人试图用固定的页脚回答之前，这根本不是我想要的。

jfiddle

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>

Answer 1

这就是我最终得到的......

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

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

document.getElementById("i")

然后，如果我们不在首页上，我会添加包装

document.getElementById("elem"+i)

并在footer.php中关闭实际页脚之前的包装div

stickyfooter.css：

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


...

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

Bootstrap，jumbotron和粘性页脚

1 个答案: