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

但是，在其中一个页面中，我需要在 .page-wrap 中设置 height:100% 以调整其子项的高度。设置 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