Question

我正试图在我的网站上找到一个具有自定义高度的粘性页脚，这比我预期的要困难得多。

此处是我的页脚的屏幕截图：

页脚覆盖了我的联系表单，因为我已明确设置了419像素的高度。

在内容较短的页面上，页脚粘贴到底部的屏幕很好...但只是因为我已经明确设置了高度。

这是我的CSS和HTML：

＆＃13;

html {
    position: relative;
    min-height: 100%;
}

body {
    background: #ffffff;
}

body > .container {
    padding-bottom: 100px;
}

/* footer */
footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 419px;
    background-color: #222;
}

＆＃13;

<!-- 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">
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>

    </head>
    <body>

        <!-- navigation -->
        <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="">
                        <img alt="" src="">
                    </a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li>
                            <a class="" href="">
                                <i class="fa fa-home" aria-hidden="true"></i>
                                Home
                            </a>
                        </li>
                        <li>
                            <a class="" href="">
                                <i class="fa fa-certificate"></i>
                                Courses
                            </a>
                        </li>
                        <li>
                            <a class="" href="">
                                <i class="fa fa-lightbulb-o"></i>
                                Our Method
                            </a>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a class="sign-in" href="">
                                Dashboard
                                <i class="fa fa-tachometer"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <!-- end navigation -->

        <!-- main content -->
        <main>

        </main>
        <!-- end main content -->

        <!-- footer -->
        <footer>
            <div class="container-fluid bg-footer">
                <div class="container">

                    <!-- footer menus -->
                    <div class="row">
                        <div class="col-md-3">
                            <h3>About</h3>

                        </div>
                        <div class="col-md-3">
                            <h3>Help</h3>
                            <ul class="list-unstyled">
                                <li>
                                    <a href="">
                                        Go to a class
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        Find an order
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        Courses
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        Jobs
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        Contact us
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        About us
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="col-md-3">
                            <h3>Social</h3>
                            <ul class="list-unstyled">
                                <li>
                                    <h3>
                                        <i class="fa fa-facebook" aria-hidden="true"></i>
                                    </h3>
                                </li>
                                <li>
                                    <h3>
                                        <i class="fa fa-twitter" aria-hidden="true"></i>
                                    </h3>
                                </li>
                                <li>
                                    <h3>
                                        <i class="fa fa-vk" aria-hidden="true"></i>
                                    </h3>
                                </li>
                            </ul>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <a class="btn btn-alt btn-block" href="">
                                    Student Login
                                </a>
                            </div>
                            <div class="form-group">
                                <a class="btn btn-alt btn-block" href="">
                                    Teacher Login
                                </a>
                            </div>
                        </div>
                    </div>
                    <!-- end footer menus -->

                    <hr>

                    <!-- footer subtext -->
                    <div class="row">
                        <div class="col-md-12">
                            <span class="text-muted">
                                High quality English lessons
                                <div class="pull-right">
                                    <a href="">Privacy</a> | <a href="">Terms and Conditions</a>
                                </div>
                            </span>
                        </div>
                    </div>
                    <!-- end footer subtext -->

                </div>
            </div>

            <!-- sub footer -->
            <div class="container-fluid bg-copyright">
                <div class="container">
                    <p class="copyright">
                        &copy; 2016 Toucan-Talk.com ltd
                    </p>
                </div>
            </div>
            <!-- end sub footer -->

        </footer>
        <!-- end footer -->

    </body>
</html>

＆＃13;

如何将页脚粘贴到页面底部a）。没有它重叠到我的内容和b）。无需明确设置页脚的高度。

Answer 1

在您的情况下，我建议使用Flexbox。使用Flexbox的一大优势是您不再需要为页脚设置特定高度。

只需将CSS更改为以下内容即可实现您想要的目标

$xpath->evaluate('count(//book/chapter');

Answer 2

如果页脚的高度固定，只需将CSS编辑为：

body {
    background: #ffffff;
    padding-bottom: 419px;
}

在自举中可变高度的粘性页脚

2 个答案: