具有动态高度的 Stickyfooter答案

【问题标题】：Stickyfooter with dynamic height具有动态高度的 Stickyfooter
【发布时间】：2016-04-21 17:23:07
【问题描述】：

我正在尝试重新创建这个问题的答案：CSS Sticky Footers with Unknown Height

所以基本上我想要一个能够改变它的高度（动态）的粘性页脚。所以我不知道高度。

这里是代码笔： http://codepen.io/basickarl/pen/ZQXJdQ?editors=110

我似乎无法让它工作。

html:

<div class="wrapper">
  <div class="div1">
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
  </div>
  <div class="div2">
    roger<br>
    roger<br>
    roger<br>
    roger<br>
    roger<br>
    roger<br>
    roger<br>
    roger<br>
    roger<br>
    roger<br>
    roger<br>
    roger<br>
    roger<br>
    roger<br>
  </div>
  </div>

css:

html, body {height: 100%;}

.wrapper {
  display: table; 
  width: 100%; 
  height: 100%;
}

.div1 {
  display: table-row;
  height: auto;
}
.div2 {
  display: table-row;
  background: red;
}

【问题讨论】：

您是否检查过该问题的其他答案？如果我理解正确，这似乎可行：jsfiddle.net/g22x195z
@FaustoNA 我一定误解了“粘性”这个词。 Afaiak 粘性意味着页脚将始终显示？
哦！我想我可以做到。对不起，我理解错了。

标签： css

【解决方案1】：

我建议使用 flexbox 而不是表格。

.wrapper {
    display: flex;
    flex-direction: column;
}
.wrapper .div1 {
    flex: 1;
}

访问 flexboxfroggy.com 以了解有关 flexbox 的更多信息。

【讨论】：

【解决方案2】：

更新答案： http://jsfiddle.net/3sLa37dv/

很抱歉，我完全误解了您的第一个请求，希望这能解决它。

我用了一个小的 jQuery sn-p：

$(document).ready(function() {
   $('#content').css('margin-bottom', $('#footer').height() + 'px');
});

它将margin-bottom:; 与#content 相加，增加了#footer 的高度。祝你好运！

【讨论】：

事实上，这里的问题是一些“你好”文本现在隐藏在页脚下:(
更新答案。现在我很确定我明白了。