CSS 粘性页脚 |没有固定高度的页脚

Question

我已经从http://www.cssstickyfooter.com/ 多次实现了粘性页脚。唯一的问题是页脚具有固定的高度。是否有一个纯 CSS 解决方案可以让页脚根据里面的内容增长？

JS 解决方案还不错，但 CSS 最好。

提前感谢您的帮助。

Answer 1

请确保它适用于所有浏览器，但请尝试：

#footer { position:absolute; top:100%; width:100%; }

Answer 2

看看，对你有用

可变边距； $(函数(){ var pageHeight = $('#pageKeeper').height(); var clientHeight = window.innerHeight || document.documentElement.clientHeight; if (clientHeight > pageHeight) { margin = clientHeight - pageHeight; if (margin <= 120) { $('#footer').css('top', pageHeight + 30) } else { $('#footer').css('top', clientHeight - 90) } } else { margin = pageHeight - clientHeight; $('#footer').css('top', pageHeight + 30) } $('#footer').show()

})

Answer 3

更新答案

最初的答案已经超过五年了，并且在页脚高度增加或减少的情况下没有更新填充是失败的。您可以绑定到窗口的 resize 事件，并在每次触发时调用它，但这有点过分了。

我会鼓励你绑定到window.onresize 事件，但是限制这样我们不会计算样式、破坏 DOM 并导致布局几十次的逻辑每秒：

(function () {

    "use strict";

    var body = document.querySelector( "body" );
    var footer = document.querySelector( "footer" );

    window.addEventListener(
        // Throttle logic: http://jsfiddle.net/jonathansampson/7b0neb6p/
        "resize", throttle( adjustContainerPadding(), 500 )
    );

    function adjustContainerPadding () {
        body.style.paddingBottom = window.getComputedStyle( footer ).height;
        return adjustContainerPadding;
    }

}());

当页面加载时，我们立即触发adjustContainerPadding 方法。此方法将主体的paddingBottom 设置为与footer 的计算高度 匹配。请注意，window.getComputedStyle 方法需要 IE9 或更高版本。

小提琴：http://jsfiddle.net/jonathansampson/7b0neb6p/

---

原答案

我鼓励你（为了简单起见）只使用 cssstickyfooter 代码，并通过 javascript 设置 css 值（jQuery 代码如下）。

$(function(){
  var footerHeight = $("#footer").height();
  $("#main").css("padding-bottom", footerHeight);
  $("#footer").css("margin-top", -footerHeight);
});

代码未经测试，但应该可以正常工作

无论您的页脚中有多少内容，这都会自动为您重置 CSS 值。

Answer 4

另一种方式——http://pixelsvsbytes.com/blog/2011/09/sticky-footers-the-flexible-way/

Answer 5

以下方法非常简单，可确保您的页脚适应您的窗口大小调整。

来自https://getbootstrap.com/examples/sticky-footer/ 和http://blog.mojotech.com/responsive-dynamic-height-sticky-footers/ 的灵感

CSS

html {
  position: relative;
  min-height: 100%;
}

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

JS

function positionFooter() {
  $("main").css("padding-bottom", $("footer").height());
}

// Initally position footer
positionFooter();

// Reposition footer on resize
$(window).resize(function() {
  positionFooter();
});

Answer 6

DISPLAY TABLE = 无 JS 且无固定高度！

适用于现代浏览器 (IE 8 +) - 我在几个浏览器中测试过它，一切似乎都运行良好。

我发现了这个解决方案，因为我需要一个没有固定高度且没有 JS 的粘性页脚。代码如下。

解释：基本上你有一个容器 div 有 2 个子元素：一个包装器和一个页脚。将页面上所需的所有内容（除了页脚）放在包装器中。容器设置为display: table; 包装器设置为display: table-row; 如果将html、body 和包装器设置为height: 100%，页脚将粘在底部。

页脚也设置为display: table;。这是必要的，以获得子元素的边距。您还可以将页脚设置为display: table-row; 这将不允许您在页脚上设置margin-top。在这种情况下，您需要使用更多嵌套元素来发挥创意。

解决办法：https://jsfiddle.net/0pzy0Ld1/15/

还有更多内容： http://jantimon.nl/playground/footer_table.html

/* THIS IS THE MAGIC */

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
html,
body {
  margin: 0;
  padding: 0;
}
html,
body,
#container,
#wrapper {
  height: 100%;
}
#container,
#wrapper,
#footer {
  width: 100%;
}
#container,
#footer {
  display: table;
}
#wrapper {
  display: table-row;
}
/* THIS IS JUST DECORATIVE STYLING */

html {
  font-family: sans-serif;
}
#header,
#footer {
  text-align: center;
  background: black;
  color: white;
}
#header {
  padding: 1em;
}
#content {
  background: orange;
  padding: 1em;
}
#footer {
  margin-top: 1em; /* only possible if footer has display: table !*/
}

<div id="container">
  <div id="wrapper">
    <div id="header">
      HEADER
    </div>
    <div id="content">
      CONTENT
      <br>
      <br>some more content
      <br>
      <br>even more content
    </div>
  </div>
  <div id="footer">
    <p>
      FOOTER
    </p>
    <br>
    <br>
    <p>
      MORE FOOTER
    </p>
  </div>
</div>

Answer 7

我真的不知道为什么每个人都不使用这种技术。就是这么简单

没有固定的高度、JAVASCRIPT 或表格

有更多内容时展开，没有内容时则停留在底部

*{
  margin: 0; 
  padding: 0;
}
html, body{
  height: 100%; 
}
body{
  min-height: 100%;
  display: flex;
  flex-direction: column;
  
}
.content{
  flex: 1;
  background: #ddd;
}

<body>
  <header>
    Header
  </header>
  
  <div class='content'>
    This is the page content
    <br>
    PS. Don't forget the margin: 0 and padding: 0 to avoid scrollbars (this can be also put into the   body css)
  </div>
  
  <footer>
    Footer
  </footer>
</body>