在包含元素上设置高度的粘性页脚答案

【问题标题】：sticky footer with height set on containing element在包含元素上设置高度的粘性页脚
【发布时间】：2013-09-09 10:36:01
【问题描述】：

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

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%？？

【问题讨论】：

你要给我们看你的小提琴吗？
我使用 jQuery 制作粘性页脚。
@FirdavsKurbonov ......这就是我想做的事情。无论如何，这里之前问的是小提琴jsfiddle.net/z9Unk/263 ......如果你从容器流体中删除高度声明......那么它就可以了
@Itay...我已经包含了小提琴...请参阅我上面的评论

标签： html css

【解决方案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

【讨论】：

【解决方案2】：

   .container-fluid 
   {
    position:relative;
    min-height: 100%;
    width:100%;
    border:1px solid green;
   }

这会将页脚置于页面底部。这样可以正常工作。

【讨论】：