当前位置：文江博客话题详情

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

发布于 2024-10-07 09:42:18 字数 196 浏览 7 评论 0原文

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

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

预先感谢您的帮助。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一个人的旅程 2024-10-14 09:42:18

更新的答案

原始答案已经有五年多了，并且失败的原因是，如果页脚高度增加或减少，填充不会更新。您可以绑定到窗口的 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 值。

Updated Answer

The original answer is over five years old, and fails in that the padding is not updated in the event the footer height is increased, or decreased. You could bind to the resize event of the window, and call this on every fire, but that would be a bit excessive.

I would instead encourage you to bind to the window.onresize event, but throttle the logic such that we aren't computing styles, thrashing the DOM, and causing layouts dozens of times per second:

(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;
    }

}());

When the page loads, we immediately fire the adjustContainerPadding method. This method sets the paddingBottom of the body to match the computed height of the footer. Note here that the window.getComputedStyle method requires IE9 or greater.

Fiddle: http://jsfiddle.net/jonathansampson/7b0neb6p/

Original Answer

I would encourage you (for simplicity) to just use the cssstickyfooter code, and set the css values via javascript (jQuery code follows).

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

code is untested, but should work just fine

No matter how much content you have in your footer, this will automatically reset the CSS values for you.

回复收藏 0 原文

颜漓半夏 2024-10-14 09:42:18

我真的不知道为什么大家不使用这种技术。非常简单

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

I really don't know why everyone is not using this technique. It's so easy

NO FIXED HEIGHT, JAVASCRIPT OR TABLES

Expands when more content, and when there isn't it sticks to bottom

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

回复收藏 0 原文

小梨窩很甜 2024-10-14 09:42:18

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

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

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

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

DISPLAY TABLE = NO JS and NO fixed height!

Works in modern browsers ( IE 8 + ) - I tested it in several browser and it all seemed to work well.

I discovered this solution because I needed a sticky footer without fixed height and without JS. Code is below.

Explanation: Basically you have a container div with 2 child elements: a wrapper and a footer. Put everything you need on the page ( exept the footer ) in the wrapper. The container is set to display: table; The wrapper is set to display: table-row; If you set the html, body and wrapper to height: 100%, the footer will stick to the bottom.

The footer is set to display: table; as well. This is necessary, to get the margin of child elements. You could also set the footer to display: table-row; This will not allow you to set margin-top on the footer. You need to get creative with more nested elements in that case.

The solution: https://jsfiddle.net/0pzy0Ld1/15/

And with more content: 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>

回复收藏 0 原文

望笑 2024-10-14 09:42:18

以下方法非常简单，可确保页脚随着窗口大小的调整而调整。

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

CSS

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

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

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

// Initally position footer
positionFooter();

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

The following method is extremely simple and ensures that your footer adapts as your window resizes.

Inspiration from https://getbootstrap.com/examples/sticky-footer/ and http://blog.mojotech.com/responsive-dynamic-height-sticky-footers/

CSS

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

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

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

// Initally position footer
positionFooter();

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

回复收藏 0 原文

一抹微笑 2024-10-14 09:42:18

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

#footer {position:absolute;顶部：100%；宽度：100%； }

回复收藏 0 原文

药祭#氼 2024-10-14 09:42:18

检查一下，这对你有用

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

})

check it out, it will be useful for you

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

})

回复收藏 0 原文

~没有更多了~