Bootstrap 缩放时页脚向上

Question

伙计们，我是网络开发的新手，我正在创建一个网站，但卡在了页脚中。我希望我的页脚在放大时保持在底部并位于底部但是当我放大时我的页脚会上升，如屏幕截图所示。我不知道有什么问题，在 google 中搜索但找不到 solution.Help SCREENSHOT 所有代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <title></title>
</head>

<body>

    <nav class="navbar navbar-expand-lg justify-content-end">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto container justify-content-center">
                <li class="nav-item">
                    <a class="nav-link" href="#">HOME</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">ABOUT ME</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">PROJECTS</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">CONTACT</a>
                </li>
            </ul>
        </div>
    </nav>
    <br>
    <br>
    <br>
    <div class="container">
        {% block content %}{% endblock %}
    </div>


    <footer class="page-footer font-small blue pt-4">
        <div class="container-fluid text-center text-md-left">
            <div class="row">
                <div class="col-md-6 mt-md-0 mt-3">
                    <h4 class="text-uppercase"><b>About</b></h4>
                    <p>Bright World is a multinational corporation headquartered<br>in Pakistan, one of the largest
                        electronics companies in the<br>world, currently focused in the area of lighting. It
                        was<br>founded in  by Gerard Mark and his father<br>Frederik, with their
                        first products being light bulbs.</p>
                </div>
                <hr class="clearfix w-100 d-md-none pb-3">
                <div class="col-md-3 mb-md-0 mb-3">
                    <h4 class="text-uppercase"><b>Brands</b></h4>
                    <ul class="list-unstyled footer-links">
                        <li>
                            <a href="Philips Page.html">Philips</a>
                        </li>
                        <li>
                            <a href="GE Lighting page.html">Ge Lighting</a>
                        </li>
                        <li>
                            <a href="Nichia Page.html">Nichia</a>
                        </li>
                        <li>
                            <a href="Osaka Lighting Page.html">Osaka Lighting</a>
                        </li>
                        <li>
                            <a href="Epistar Page.html">Epistar</a>
                        </li>
                    </ul>

                </div>


                <div class="col-md-3 mb-md-0 mb-3">
                    <h4 class="text-uppercase"><b>Links</b></h4>
                    <ul class="list-unstyled footer-links">
                        <li>
                            <a href="BrightWorld homepage.html">Home</a>
                        </li>
                        <li>
                            <a href="BrightWorld gallerypage.html">Gallery</a>
                        </li>
                        <li>
                            <a href="BrightWorld aboutpage.html">About</a>
                        </li>
                        <li>
                            <a href="BrightWorld contactpage.html">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="footer-copyright text-center py-3">© Copyright 2021 BrightWorld
        </div>
    </footer>

</body>

<style>
    body {
        position: relative;
        font-family: 'Poppins', sans-serif;
    }

    body>.container {
        padding-top: 60px;
    }

    a {
        color: black;
    }

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

    .navbar {
        background-color: coral;
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    }

    .nav-link {
        color: white;
        font-family: 'Poppins', sans-serif;
        font-size: 16px;
        transition: 0.1s;
    }

    .nav-link:hover {
        color: rgb(220, 217, 217);
    }

    ul {
        list-style-type: none;
    }

    /* 
    ul li {
        padding-left: 30px;
    } */

    body {
        height: calc(100vh - 100px);
    }

    .page-footer {
        background-color: #1B1B1B;
        color: white;

    }

    .footer-copyright {
        background-color: #090909;
        color: white;
    }

    .footer-links a {
        padding: 10px 0;
        border-bottom: 1px solid #404040;
        color: #fff;
        font-size: 16px;
        display: block;
        transition: color 0.5s ease-in-out;
        transition: border 0.5s ease-in-out;
        text-decoration: none;
    }

    .footer-links a:hover {
        color: aqua;
        border-bottom: 1px solid aqua;
    }
</style>

</html>

HTML:

<footer class="page-footer font-small blue pt-4">
        <div class="container-fluid text-center text-md-left">
            <div class="row">
                <div class="col-md-6 mt-md-0 mt-3">
                    <h4 class="text-uppercase"><b>About</b></h4>
                    <p>Bright World is a multinational corporation headquartered<br>in Pakistan, one of the largest
                        electronics companies in the<br>world, currently focused in the area of lighting. It
                        was<br>founded in Pakistan in 1891 by Gerard Mark and his father<br>Frederik, with their
                        first products being light bulbs.</p>
                </div>
                <hr class="clearfix w-100 d-md-none pb-3">
                <div class="col-md-3 mb-md-0 mb-3">
                    <h4 class="text-uppercase"><b>Brands</b></h4>
                    <ul class="list-unstyled footer-links">
                        <li>
                            <a href="Philips Page.html">Philips</a>
                        </li>
                        <li>
                            <a href="GE Lighting page.html">Ge Lighting</a>
                        </li>
                        <li>
                            <a href="Nichia Page.html">Nichia</a>
                        </li>
                        <li>
                            <a href="Osaka Lighting Page.html">Osaka Lighting</a>
                        </li>
                        <li>
                            <a href="Epistar Page.html">Epistar</a>
                        </li>
                    </ul>

                </div>


                <div class="col-md-3 mb-md-0 mb-3">
                    <h4 class="text-uppercase"><b>Links</b></h4>
                    <ul class="list-unstyled footer-links">
                        <li>
                            <a href="BrightWorld homepage.html">Home</a>
                        </li>
                        <li>
                            <a href="BrightWorld gallerypage.html">Gallery</a>
                        </li>
                        <li>
                            <a href="BrightWorld aboutpage.html">About</a>
                        </li>
                        <li>
                            <a href="BrightWorld contactpage.html">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="footer-copyright text-center py-3">© Copyright 2021 BrightWorld
        </div>
    </footer>

CSS:

.page-footer {
        background-color: #1B1B1B;
        color: white;
        position: relative;
    }
    .footer-copyright {
        background-color: #090909;
        color: white;
    }
    .footer-links a {
        padding: 10px 0;
        border-bottom: 1px solid #404040;
        color: #fff;
        font-size: 16px;
        display: block;
        transition: color 0.5s ease-in-out;
        -webkit-transition: color 0.5s ease-in-out;
        -moz-transition: color 0.5s ease-in-out;
        -ms-transition: color 0.5s ease-in-out;
        transition: border 0.5s ease-in-out;
        -webkit-transition: border 0.5s ease-in-out;
        -moz-transition: border 0.5s ease-in-out;
        -ms-transition: border 0.5s ease-in-out;
        text-decoration: none;
    }
    .footer-links a:hover {
        color: aqua;
        border-bottom: 1px solid aqua;
    }

放大前chrome：在 chrome 中放大 125% 后：

Answer 1

请检查页眉和页脚高度以及总和和负数。

如何通过以下步骤检查身高：

检查标签上的元素并将鼠标悬停在页脚标签上，看到的高度与后续标签相同。

.content-area {
    height: cal(100vh - 413px);
}

remove: 

body {
    height: calc(100vh - 100px);
}

<section class="content-area">
    <div class="container">
        {% block content %}{% endblock %}
    </div>
</section>

replace to

<div class="container">
        {% block content %}{% endblock %}
    </div>

Answer 2

要将页脚保留在底部，请进行此更改。删除容器 div 之前的“
”。将全高 class 添加到容器 div

<div class="container full-height">
   {% block content %}{% endblock %}
</div>

删除此样式

body {
    height: calc(100vh - 100px);
}

并添加此样式

.container.full-height {
    height: calc(100vh - 413px);
 }

413px 值来自页眉和页脚的总高度。

这是 JSFiddle link https://jsfiddle.net/yudizsolutions/9f2vy3wr/5/
希望对你有帮助。

Bootstrap 缩放时页脚向上

Bootstrap footer going up when zoomed

html

css

footer

bootstrap-4