html - 在包含元素上设置高度的粘性页脚

Question

我可以按照说明在网页上设置粘性页脚

http://css-tricks.com/snippets/css/sticky-footer/

它建议min-height:100%并且高度未设置

.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}

但是，在其中一个页面中我需要设置 height:100% in .page-wrap 调整其子项的高度。当我设置 height:100% 后，我的粘性页脚不起作用并出现在页面中间。

有没有办法让粘性页脚在 .page-wrap 中将高度设置为 100% 的情况下工作？

Answer 1

从 container-fluid 类中删除 height:100% 元素

.container-fluid {
 position: relative;
 min-height: 100%;
 /*height: 100%;*/ /*Remove the height and it will work fine*/
 width: 100%;
 border: 1px solid green;
}

<强> DEMO HERE