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

Question

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

Tom*_*lin 6 css sticky-footer

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

JS解决方案也不错,但CSS最好.

在此先感谢您的帮助.

Answer 1

Sam*_*son 5

更新的答案

原始答案超过五年,并且未能在页脚高度增加或减少的情况下更新填充.你可以绑定到窗口的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;
    }

}());

Run Code Online (Sandbox Code Playgroud)

页面加载时,我们立即触发该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);
});

Run Code Online (Sandbox Code Playgroud)

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

无论页脚中有多少内容,都会自动为您重置CSS值.

Answer 2

小智 5

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

链接仅答案糟透了。链接已死，投票失败 (2认同)
在这里找到这篇文章：https://pixelsvsbytes.com/2011/09/sticky-css-footers-the-flexible-way/ (2认同)

Answer 3

mat*_*eos 5

我真的不知道为什么大家不使用这种技术。它是如此容易

无固定高度、JavaScript 或表格

当内容更多时展开，当没有内容时它会粘在底部

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	15 年，2 月前
查看次数：	6396 次
最近记录：	9 年，3 月前