Question

如果没有可用的内容，如何可用，如何才能在页面底部制作页脚？ 使用javascript

这是我的代码段

<%@ page language="java" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
    <title>About Us | HiFood</title>        
    <jsp:include page="/aaa_general/meta_tag_general_responsive.jsp" />
    <jsp:include page="include/journeyscript.jsp" />
</head>
<body class="static-page">
    <div class="mainWrapp">
        <jsp:include page="include/header.jsp">
            <jsp:param value="index" name="selected" />
        </jsp:include>
        <div class="containerWrapp">
            <section class="inner-page-template">
                <div class="container">
                    <div class="inner-page-template-content">
                        <pre><code>${msg}</code></pre><br>
                    </div>
                </div>
            </section>              
        </div>
    </div>
    <jsp:include page="include/footer.jsp" />
    <jsp:include page="include/analytics.jsp" />        
</body>

页脚JSP

<footer id="footer" class="footer footer-bg">
<div class="container">
  <div class="footer-left">
    <div class="col-md-6 col-xs-6">
      <div id="blink" class="footer-logo"><a href="#" title="Hi Food"><img src="/static/hifood_pk/images/logo.png" alt="Hi Food" /></a></div>
        <ul>
          <li><a href="/"><fmt:message key='label.link.home' /></a></li>    
          <li><a href="/${aboutUsUrl}"><fmt:message key='label.link.about.us' /></a></li>
          <li><a href="/${contactUsUrl}"><fmt:message key='label.link.contact.us' /></a></li>
          <li><a href="/${faqUrl}"><fmt:message key='label.link.faq' /></a></li>
        </ul>
      </div>
    </div>
    <div class="col-sm-4 col-xs-12">
      <ul>
        <li><a href="#" title="Blue Area">Blue Area</a></li>
        <li><a href="#" title="F 6">F 6</a></li>
        <li><a href="#" title="F 7">F 7</a></li>
        <li><a href="#" title="F 8">F 8</a></li>
        <li><a href="#" title="F 10">F 10</a></li>
        <li><a href="#" title="F 11">F 11</a></li>
      </ul>
    </div>
    <div class="col-sm-4 col-xs-12">
      <ul>
        <li><a href="#" title="Blue Area">Blue Area</a></li>
        <li><a href="#" title="F 16">F 16</a></li>
        <li><a href="#" title="F 17">F 17</a></li>
        <li><a href="#" title="F 18">F 18</a></li>
        <li><a href="#" title="F 110">F 110</a></li>
        <li><a href="#" title="F 111">F 111</a></li>
      </ul>
    </div>
    <div class="col-sm-4 col-xs-12">
      <ul>
        <li><a href="#" title="Blue Area">Blue Area</a></li>
        <li><a href="#" title="F 16">F 16</a></li>
        <li><a href="#" title="F 17">F 17</a></li>
        <li><a href="#" title="F 18">F 18</a></li>
        <li><a href="#" title="F 110">F 110</a></li>
        <li><a href="#" title="F 111">F 111</a></li>
      </ul>
    </div>
  </div>
</div>

任何建议。想在页面底部找到页脚

Answer 1

尝试在代码中添加几个CSS。这应该是一个技巧。

#footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
}

Answer 2

这很好用。

<script>
  $(document).ready(function() {
    var docHeight = $(window).height();
    var footerHeight = $('#footer').height();
    var footerTop = $('#footer').position().top + footerHeight;
    if (footerTop < docHeight) {
      $('#footer').css('margin-top', 0+ (docHeight - footerTop) + 'px');
    }
  });
</script>

您至少需要一个带#footer

的元素

当不想要滚动条时，如果内容适合屏幕，只需更改10 to 0的值。如果内容不适合屏幕，则会显示滚动条。

如何使用JavaScript将页脚保留在页面底部

2 个答案: