使用 Ryan Fait 代码的动态粘性页脚高度答案

【问题标题】：Dynamic Sticky Footer Height with Ryan Fait's Code使用 Ryan Fait 代码的动态粘性页脚高度
【发布时间】：2014-01-18 02:06:22
【问题描述】：

好的，有很多关于Ryan Fait's sticky footer 的问题，但是请不要立即忽略这个问题！我想要做的是为我的页脚设置一个动态大小的高度，并让它贴在页面底部。

Ryan Fait 的解决方案是将所有页面内容包裹在#wrapper 中，并将#wrapper 的margin-bottom 设置为页脚的高度。这在硬编码到 CSS 中时效果很好，但我不知道我的页脚会有多大。因此，我希望能够使用 javascript 设置 #wrapper 的 margin-bottom。到目前为止，我一直没有成功。 Here 是我的设置。

我已经做了这么久，我几乎没有头发可以拔掉。你知道我的错误在哪里吗？

JSFiddle 上的代码

HTML

<body>
    <div id="wrapper">
   Wrapper
    </div> <!-- #wrapper -->

    <footer>
        Footer
    </footer>
</body>

CSS

* {
    margin: 0;
    }
html, body {
    height: 100%;
    }
#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto; /* Negative margin set with JS */
    }
footer {
    height: 100px;
    }

jQuery

$(window).load(function() {
    set_window_bottom_margin();
});

function set_window_bottom_margin() {
    var margin = $('footer').outerHeight(true);

    $('.wrapper').css('margin-bottom', margin * -1 + 'px');
}

【问题讨论】：

您能否将标记/css 和脚本也添加到您的问题中，以防 jsfiddle 变黑？

标签： javascript jquery html css

【解决方案1】：

现在你可以在 css 中做到这一点：

html, body {
  height:100%;
  width:100%;
  margin:0;
}
body {
  display:table;
}
main, footer {
  display:table-row;
}
main {height:100%;background:red;}
footer {background:green;}
footer:hover br {display:none;}/* whatever else on footer:hover s for demo purpose */

<main>
  <div>
    main
  </div>
</main>
<footer>
  <div>
    footer<br/>
    footer<br/>
  </div>
</footer>

演示http://codepen.io/anon/pen/EvHwk

【讨论】：

哇！厉害了哈哈！非常感谢：D