Question

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

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

这是codepen： 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;
}

Answer 1

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

对不起，我完全误解了你的第一个请求，希望能解决这个问题。

我使用了一个小的jQuery片段：

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

它将margin-bottom:;添加到#content的高度#footer。祝你好运！

Answer 2

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

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

请参阅flexboxfroggy.com以了解有关flexbox的更多信息。

Stickyfooter动态高度

2 个答案: