Question

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

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

提前感谢您的帮助。

Answer 1

更新了答案

原始答案超过五年，并且未能在页脚高度增加或减少时更新填充。您可以绑定到窗口的 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 2

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

Answer 3

DISPLAY TABLE =没有JS，没有固定的高度！

适用于现代浏览器（IE 8 +） - 我在几个浏览器中对它进行了测试，这一切似乎都运行良好。

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

说明：基本上你有一个带有2个子元素的容器div：一个包装器和一个页脚。将您需要的所有内容放在页面上（放置页脚）在包装器中。容器设置为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

＆＃13;

/* 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 !*/
}

＆＃13;

<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>

＆＃13;

Answer 4

我真的不知道为什么每个人都不使用这种技术。这很容易

没有固定的高度，JAVASCRIPT或TABLES

当更多内容时，以及当没有内容时，会扩展

*{
  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>

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

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

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

Answer 7

检查出来，它对你有用

var margin;
$(function(){
    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()

}）

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

7 个答案: