Question

詹姆斯在这里！我已经尝试了大约两个小时来获得一个粘性页脚，但我似乎一直搞乱CSS。我正在寻找jQuery可以处理的脚本。我理解大多数脚本是如何工作的（这是令人惊讶的，因为我只是在学习），但我需要脚本才能工作，无论页脚的高度是多少，因为它没有设置动态高度。我页面的CSS文件。有人能够为粘性页脚提供工作脚本吗？我希望页脚本身始终位于页面底部，但不是固定位置。内容元素是#posts，页脚区域是ID为#bottom的元素。这是一个页面示例：JTB Permalink Page

Answer 1

我刚刚离开这里

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery Sticky footer</title>
    <!-- include jQuery -->
    <script src="jquery-2.1.0.min.js"></script>
    <!-- include our scripts -->
    <script type="text/javascript">
      $(function () {
        // sticky footer
        (function () {
          var
            $window = $(window),
            $body   = $(document.body),
            $footer = $("#footer"),
            condition = false,
            resizing  = false,
            interval  = 500
            ;

          function positionFooter() {
            if (resizing) {
              setTimeout(function(){
                if(resizing == false) {
                  positionFooter();
                }
              }, interval);
              return true;
            }
            var
              footer_position = $footer.css('position'),
              body_height   = $body.height(),
              window_height = $window.height(),
              footer_height = $footer.outerHeight();

            if (footer_position == 'absolute') {
              condition = body_height + footer_height < window_height
            }
            else {
              condition = body_height < window_height
            }

            if (condition) {
              $footer.css('position', 'absolute').css('bottom', 0);
            }
            else {
              $footer.css('position', 'relative');
            }

            resizing = setTimeout(function () {
              resizing = false;
            }, interval);

            return true;
          }

          $window.bind("load", function () {
            positionFooter()
          });

          $window.resize(positionFooter);

        }());
      });
    </script>

    <style>
      body {
        text-align: center;
      }

      #header {
        width: 100%;
        background-color: green;
        color: white;
        height: 100px;
      }

      #footer {
        width: 100%;
        background-color: blue;
        color: white;
      }
    </style>
  </head>

  <body>
    <header id='header'>
      Header content
    </header>
    <div id='content'>
      Content is here!
    </div>
    <footer id='footer'>
      Sticky footer content
    </footer>
  </body>
</html>

Answer 2

确定。 HTML：

<div id="container">
    <div id="wrapper">
        <!-- CONTENT GOES HERE -->
    </div>
    <div id="footer">
        <!-- FOOTER GOES HERE -->
    </div>
</div>

CSS：

#container {
    min-height: 100%;
    position: relative;
    width: 100%;
}
#wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 206px; /* footer height, we will fix that with jquery */
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0px;
    height: 206px; /* footer height if any */
}

jQuery的：

$(document).ready(function(){
    var footer_height=$("#footer").height();
    $("#wrapper").css({
        'padding-bottom' : footer_height
    });
});

我必须警告你，jquery .height（）函数可能无法正常工作所以要小心填充和边距（只需将边距/填充值添加到'footer_height'，你应该没问题。）

Answer 3

我刚刚创建了一个有粘性页脚的页面......

这会创建一个页眉和页脚，每页55px，页脚粘贴到浏览器窗口的最底部

这是我最终做的事情：

HTML：

<!--main header container-->
<div id="header" class="ui-frame ui-frame-header"></div>

<!--main container for app-->
<div id="content" class="ui-mainContent">
    This is a place holder for my content
</div>

<!--//main footer container-->
<div id="footer" class="ui-frame ui-frame-footer"></div>

CSS：

.ui-frame {
    width: 100%;
    height: 55px;
    background: #000000;
    font-family: Segoe UI, Arial, sans-serif;
    color: #ffffff;
    text-align: right;
    vertical-align: middle;
    font-size: 16px;
}

.ui-frame-header {
   position: absolute;
   top: 0;
}

.ui-mainContent {
    position: absolute;
    top: 55px;
    bottom: 55px;
    background: #ffffff;
    font-family: Segoe UI, Arial, sans-serif;
}

.ui-frame-footer {
    position: absolute;
    bottom: 0
}

Answer 4

如果我理解正确，则不需要jQuery。简单明了......

<强> http://www.cssstickyfooter.com/

Answer 5

<强> JQuery的

function getWndowSize()
{
    var windows_height=$(windows).height();
    var current_height=windows_height-100;/*change values of 100 how much u need based on your requirement*/
    $("#wrapper").css({'min-Height' : current_height});
}

<强>代码：

<body onload="getWndowSize()">

<div id="container">
    <div id="wrapper">
        <!-- CONTENT GOES HERE -->
    </div>
    <div id="footer">
        <!-- FOOTER GOES HERE -->
    </div>
</div>

试试吧。因为它在我的页面中正常工作。

Answer 6

我知道回答这个问题为时已晚，但对我来说也很难，而且我在这个好地方找到了一些东西，我通过了这个问题，我很乐意分享一个代码帮助了我很多。 / p>

您可以在下面的演示中找到它。

我希望这可以帮助别人，因为我总是得到其他人的帮助。

谢谢Stackoverflow。

＆＃13;

$(document).ready(function(){
$(window).on("scroll", function() {
		var footer_height = $( "#footer" ).outerHeight();
		var dim_height = $(".dim").outerHeight();
		var scrollHeight = $(document).height();
		var scrollPosition = $(window).height() + $(window).scrollTop();
		if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
			// when scroll to bottom of the page
			$(".dim").removeClass("dim-fixed");
			$(".dim").addClass("dim-static").css({
			'bottom': footer_height,
			});

		}else{
			$(".dim").removeClass("dim-static");
			$(".dim").addClass("dim-fixed").css({'bottom': 0,});
		}
});

}); //Document Ready function end

＆＃13;

body {
    margin: 0px auto;
    background: #ffffff;
    font-size: 14px;
    color: #444444;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}
.point1 {
    width: 100%;
    margin: 0 auto;
}
.clearfix:before, .clearfix:after {
    display: table;
    content: " ";    
    }
#footer {
    z-index: 104;
    display: block;
}

footer.page-footer {
    width: 100%;
    background: #333333;
    color: #fff;
    border-top: 2px white solid;
    position: absolute;
    left: 0;
    }

footer.page-footer > div {
    padding: 30px 0 40px;
    min-height: 162px;
    margin: 0 auto;
    position: relative;
}
nav.footer-menu {
    position: relative;
    float: left;
    width: 75%;
    padding-right: 30px;
    display: block;
}

nav.footer-menu > ul {
    margin-top: -3px;
}
body:not([class*="static-page"]) ul, body:not([class*="static-page"]) li {
    list-style: none;
}
nav.footer-menu > ul > li {
    display: inline-block;
    width: 33.33%;
    margin: 0;
    padding: 0;
    border: 0;
}
nav.footer-menu a {
    text-decoration: none;
    color:#fefefe;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 1.071em;
    padding: 0 10px 8px;
    vertical-align: top;
    display: inline-block;
}

.footer-data {
    font-size: 0.929em;
    color: #a0a0a0;
    overflow: hidden;
}

/* footer extra menu container*/
.dim-static  {
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	background: #ddd; */
	left: 0;
	right: 0;
	width: 100%;
	text-align: center;}
  
  .dim-fixed {
	position: fixed;
	margin-left: auto;
	margin-right: auto;
	background: #ddd; */
	left: 0;
	right: 0;
	width: 100%;
	text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<section>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>

</section>
<div class="dim"> Full width Footer menu </div>
<footer class="page-footer" id="footer">
  <div class="point1 clearfix">
    <nav class="footer-menu">
      <ul>
        <li><a class="active" title="stackoverflow.com" href="#">Home</a></li>
        <li><a rel="nofollow" title="Add a New Listing" href="#add-listing.html">Add a Listing</a></li>
        <li><a title="Search for property" href="#search.html">Search</a></li>
        <li><a rel="nofollow" title="About Us" href="#about-us.html">About Us</a></li>
        <li><a title="Contact us" href="#contact-us.html">Contact Us</a></li>
        <li><a title="My Favorites List" href="#my-favorites.html">Favorites</a></li>
        <li><a title="Terms of use" href="#terms-of-use.html">Terms of Use</a></li>
        <li><a title="Privacy Policy" href="#privacy-policy.html">Privacy Policy</a></li>
        <li><a title="FAQs" href="#faqs.html">FAQs</a></li><li><a title="Refund Policy" href="#refund-policy.html">Refund Policy</a></li>
      </ul>
    </nav>
    <div class="footer-data">
      <div class="icons">
        <a class="rss" title="Subscribe to RSS-feed" href="#" target="_blank"></a>
        <a class="facebook" target="_blank" title="Join us on Facebook" href="#"></a>
        <a class="twitter" target="_blank" title="Join us on Twitter" href="#"></a>
      </div>

      <div>
        © 2017, powered by <a title="stackoverflow.com" href="http://stackoverflow.com/">stackoverflow.com</a>
      </div>
    </div>
  </div>
</footer>
</body>

＆＃13;

此处，jsfiddle

在这两个演示中，Extra footer菜单应该只在页脚上方，自动动态高度，由于某种原因，它不会在展位演示中显示，但是如果你查看日志，你会发现我在说什么关于，我的网站100％正常工作。

你可以做很多事情，也许你会添加额外的子页脚菜单，或者你只是根据文档滚动状态将你的页脚转换为固定/静态，你也可以玩，你只需要静态/固定菜单非常好。

我希望这会对任何其他人有所帮助，因为我总是从这里得到帮助。再次感谢大家。

塔里克

jQuery粘性页脚

6 个答案: