Question

嗨，我的网站上出现了一个问题，当页脚位于绝对位置时，并且内容较小，不能仅将页脚正常推到底，所以我使用了一些技巧那，尽管我不知道是否还可以。

网站为here

仅当对页脚对象进行捏缩放时，该问题仅在chrome移动版上出现，this video表示此问题。

代码：

具有BOOTSTRAP 4.2.1的HTML5和CSS3：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Testing page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <style>
        body {
            background-color: dimgray;
        }
        img[alt="www.000webhost.com"] {
            display:none;
        div.row [class*="col-12"] {
            margin-bottom: 1rem;
        }
        div.nomarginbottom {
            margin-bottom: 0 !important;
        }
        .display-5 {
            font-size: 2.5rem;
            font-weight: 300;
            line-height: 1.2;
        }
        /*footer on the bottom */
        html {
            height:100%;
        }
        body {
            min-height:100%;
            position:relative;
        }
        body::after {
            content:'';
            display:block;
            height:100px;
        }
        .footer-bottom {
            position:absolute;
            bottom:0;
            width:100%;
        }

        /* smaller letters on smaller screen - footer */
        @media (max-width: 741px) {
            .footer {
                font-size: 100%;
            }
        }
        @media (max-width: 600px) {
            .footer {
                font-size: 80%;
            }
        }
    </style>
</head>
<body>

    <div class="pt-0 box jumbotron jumbotron-fluid text-center">    
        <h1 class="display-3">Test</h1>
    </div>


    <div class="container-fluid text-center text-white">

        <div class="row text-center mb-4 d-none d-lg-block">
            <div class="col-12">
                <h1>Web developer in 2019 &lt;b&gt;like&lt;/b&gt;...</h1>
            </div>
        </div>

        <div class="row text-center mb-5">
            <div class="col-12">
                <h2>Happy New CODE!</h2>
            </div>
        </div>

        <div class="row footer-bottom mt-5">
            <div class="col-12 footer bg-dark p-3 lead mb-0">The site was created by Jan Kustra, the executive of: XeDA+ Department of Websites.</div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>

Answer 1

您应该为页脚div添加left: 0; right: 0;或overflow-x: hidden;，并在页面中填充内容，这可能会有所帮助。但是您最好使用<footer>标签。

Chrome捏缩缩放错误-缩放后元素会更改其位置

1 个答案: