Question

我正试图让我的页脚＆＃34;粘性＆＃34;但高度不同，所以不能使用我发现的大多数方法或flexbox。有没有办法用javascript检查div下面有多少空间，所以我可以添加那么多的保证金？

html看起来像这样：

  <container>
     <header></header>
     <body><sometimes sub content></sub content></body>
     <footer></footer>
   </container>

还尝试将页脚放在容器外面，在某些解决方案中看到它，但它们都需要一个固定的高度。

Answer 1

您可以将main最小高度设置为100vh，并将页脚绝对定位在底部。主要应该至少在页脚的高度处具有底部填充，并且box-sizing: border-box以100vh高度为主。

然而，这个例子可以看到粘性页脚在运行。

＆＃13;

body {
  margin: 0;
}

main {
  position: relative;
  padding-bottom: 60px;
  min-height: 100vh;
  box-sizing: border-box;
}

.hidden {
  background: blue;
  height: 100vh;
}

main:not(:hover) > .hidden {
  display: none;
}

footer {
  position: absolute;
  width: 100%;
  height: 50px;
  bottom: 0;
  background: red;
}

＆＃13;

<main>
  <article>Short Article</article>
  
  <article class="hidden">
    long article
  </article>
  
  <footer>
    I'm the footer
  </footer>
</main>

＆＃13;

Answer 2

您可以查看是否$(document).height() > $(window).height()。这将告诉您内容的高度是否比视口长。如果是这样，请将页脚放在原位置。如果doc高度为＆lt; =视口高度，则添加使页脚粘滞。像这样：

要查看粘性和非粘性之间的区别，请运行下面的代码段，使页脚位于页面底部。要在页脚粘滞的位置查看，请以全屏模式（在代码段输出的右上角）运行代码段。您也可以在全屏模式下运行它，然后缩小浏览器大小 - 它会在窗口调整大小时重新计算。

＆＃13;

$(window).on("load resize", function() {
  // if content height <= viewport height, make footer sticky
  // else leave footer at the bottom of the content. 
  $(".footer").toggleClass("sticky", $(document).height() <= $(window).height());
});

＆＃13;

.footer {
  width: 100%;
  background-color: #555588;
  color: white;
}

.sticky {
  position: fixed;
  bottom: 0;
  left: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre style="font-size: 16px;">
    content
    content
    content
    content
    content
    content
    content
    content
    content
    content
    content
    content
    content
    content
    content
    content
    content
    content
    content
    content
    content
</pre>
<div class="footer">foo foo foo <br/>foo<br/>foo<br/></div>

＆＃13;

如何有条不紊地粘贴＆＃34;页脚？

2 个答案: