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 
   {
    position:relative;
    min-height: 100%;
    width:100%;
    border:1px solid green;
   }

这会将页脚放在页面底部。这将正常工作。

Answer 2

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

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

在这里演示