Bootstrap 4 引导程序4中的页脚有问题

我在Bootstrap4中的一个网站上工作，并在

我对它做了一点修改，虽然它在浏览器中很好，但在响应模式下会出现故障。背景色在页脚的一半处停止，其余部分以白色背景显示。提交/重置按钮大多不在页面上

我已经为此工作了几天，似乎无法让它在响应模式下工作

可以在此处看到页脚：

页脚的代码为：

<footer class="footer">
    <div class="container">
         <div class="row">
            <div class="col-md-7">
                <h4 class="footer-logo-text"><i class="fa fa-book"></i>&nbsp;&nbsp;spreading biblical truth in a darkened world ...</h4>
                  <div class="row">
                    <div class="col-10">
                      <p>
                      The goal here is to separate myth, traditions, pagan practices, and man-made stories from the truth of the Hebrew Scriptures. Many people believe that because something has been written, taught, or practiced for centuries, or even decades, it must be scriptural. Yet nothing could be further from the truth. Time does not necessarily prove the validity of something. It's therefore important to research these writings, teachings, practices, and beliefs to determine their origin and whether they actually do have a scriptural basis. <a href="/about.html" class="text-light bg-dark">more ...</a></p>
<br>
<p style="font-size:90%;margin-bottom:0;">
This Website is not affiliated with any government, institution, organization, religious group, or political establishment. Copyright &copy; 2004 - <script>document.write(new Date().getFullYear());</script> | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib.</a> Customization has been done by site owner.</p>

        </div>
                </div>
                <ul class="nav">
                    <li class="nav-item"><a href="" class="nav-link pl-0"><i class="fa fa-facebook fa-lg"></i></a></li>
                    <li class="nav-item"><a href="" class="nav-link"><i class="fa fa-twitter fa-lg"></i></a></li>
                    <li class="nav-item"><a href="" class="nav-link"><i class="fa fa-github fa-lg"></i></a></li>
                    <li class="nav-item"><a href="" class="nav-link"><i class="fa fa-instagram fa-lg"></i></a></li>
                </ul>
                <br>
            </div>
            <div class="col-md-5">

<p class="contactUs"><a id="contactMe">Contact Us</a></p>

<!--   beginning of form   -->

<form id="myForm" class="contact__form" method="post" action="mailContact.php">

    <!-- form message -->
    <div class="row">
        <div class="col-12">
            <div class="alert alert-success contact__msg" style="display: none" role="alert">
                Your message was sent successfully.
            </div>
        </div>
    </div>
    <!-- end message -->

    <!-- form element -->
    <div class="row">
        <div class="col-md-6 form-group">
            <input name="name" type="text" class="form-control" placeholder="Name" required>
        </div>
        <div class="col-md-6 form-group">
            <input name="email" type="email" class="form-control" placeholder="Email" required>
        </div>
<!--               <input id="test_email" name="email" size="25" type="text" value="" />   -->
        <div class="col-12 form-group">
            <textarea name="message" class="form-control" rows="6" placeholder="Message" required></textarea>
        </div>
        <div class="col-12">
            <input name="submit" type="submit" class="btn btn-success btn-sm" value="Send Message">  <input class="btn btn-success btn-sm" type="button" onclick="myFunction()" value="Reset form">
        </div>
    </div>
    <!-- end form element -->
</form>

<!--   end of form   -->

            </div>
        </div>

<!--   Footer design from: https://www.codeply.com/go/7TzhebXBdX/bootstrap-4-footer-with-contact-form redesigned by Lee Underwood   -->
<!--   Contact form code from: https://themehunt.com/blog/53-tutorial/162-how-to-create-an-ajax-contact-form-without-any-plugin   -->
</footer>

---

我当然需要一些帮助。如果还需要什么，请告诉我。

您应该增加媒体查询的高度，直到它容纳所有页脚内容

@media (max-width: 34em){
  .footer {
    height: 700px;
  }
}
.footer {
    position: absolute;
    width: 100%;
    height: 700px;
}

---

我似乎自己解决了这个问题。我回到教室，重新开始。（它在网上工作，所以我一定改变了一些东西，对吗？）这次我删除了左侧的一些文本，以免它太长（这就是为什么把它压得太深的原因）。现在看来效果不错

---

谢谢大家的帮助

这是我在上面的评论中提到的script.js的代码

$(document).ready(function(){
    setDynamicHeightFooter();
});
$(window).resize(function(){
    setDynamicHeightFooter();
})

function footHeight(){
    return $('footer.foooter .container').outerHeight()
}

function setDynamicHeightFooter(){
    $('footer.footer').css('height',footHeight);
    $('body').css('margin-bottom', footHeight);
}

正如我在评论中提到的，您需要一个jquery文件，您可以从jquery站点下载它，或者直接为jquery库添加CDN链接，如。。

---

我希望这能对您起作用：）

它对480x320很好，但对320x480、600x800、800x600、768x1021024、1024x768不行。我检查了您的问题，它的解决方案是使用jquery设置页脚高度动态，也可以使用动态设置正文底部边距。例如，在窗口加载和调整事件大小时，设置页脚高度，如$（'footer.footer'）。css（'height'，footHeight）；函数fooHeight（）{return$（'footer.foooter'）.outerHeight（）}与body-like$（'body'）.css（'margin-bottom'，footHeight'）的边距相同；我希望这对你有用。我对jquery不是很熟悉。你能再解释一下吗？是的，当然。jquery是一个JavaScript库。它是一个快速、小且功能丰富的JavaScript库。它通过一个易于使用的API使HTML文档遍历和操作、事件处理、动画和Ajax等变得更加简单，可以跨多个应用程序工作多种浏览器。你可以从它那里获得更多的细节，比如[如果你还有问题，请让我知道。对不起，我知道jquery是什么。我只是不熟悉使用它或JavaScript，除了插件、代码片段等。我在jquery网站上做了一些研究，但这太离谱了。有什么建议吗？

$(document).ready(function(){
    setDynamicHeightFooter();
});
$(window).resize(function(){
    setDynamicHeightFooter();
})

function footHeight(){
    return $('footer.foooter .container').outerHeight()
}

function setDynamicHeightFooter(){
    $('footer.footer').css('height',footHeight);
    $('body').css('margin-bottom', footHeight);
}