6

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

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

在此先感谢您的帮助。

4

7 回答 7

5

更新的答案

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

相反，我会鼓励您绑定到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 值。

于 2010-12-12T19:11:18.720 回答
5

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

于 2011-11-10T17:05:18.363 回答
3

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

没有固定高度、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>

于 2016-11-25T01:39:07.407 回答
2

显示表 = 没有 JS 和没有固定高度！

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

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

说明：基本上你有一个包含 2 个子元素的容器 div：一个包装器和一个页脚。将页面上所需的所有内容（除了页脚）放在包装器中。容器设置为display: table;包装器设置为display: table-row;如果将 html、正文和包装器设置为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>

于 2016-02-05T16:29:07.663 回答
1

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

来自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();
});
于 2015-12-11T17:59:31.173 回答
0

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

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

于 2010-12-12T19:05:39.737 回答
0

看看吧，对你有用

可变边距；
$(函数(){
    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()

})

于 2010-12-12T19:06:17.610 回答