如何保持页脚保持在页面底部用JavaScript

-1

如何m为能够使页脚在页面底部，如果没有内容可用的，如果要多少可用。 使用JavaScript如何保持页脚保持在页面底部用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>

任何suggesitions。希望页脚在页面

来源

2017-01-26 M Hamza Javed

哪里是你footer.jsp中的代码？ –

我做到了可用的只是来看看 –

任何一个可以告诉为什么downvote我的问题 –

这工作得很好。

<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的值，如果含量不符合滚动条会显示出来向屏幕。

来源

2017-01-26 09:29:37

尝试增加一些CSS到你的代码的底部。这应该有一个窍门。

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

来源

2017-01-26 08:08:01

这是行不通的 –

等到以后我就对小提琴运行，并告诉你 –

当主体内容成为长是不言而喻的页脚 –

如何保持页脚保持在页面底部用JavaScript

回答

相关问题