页脚底部的页脚

我想让页脚停留在页面底部。所以，我创建了min-heigt:100%一个DIV并没有高度设定动画的Ajax内容加载一个DIV：页脚底部的页脚

HTML：

<div class="main"> 
    <div class="header navi>…</div> 
    <div class="animater"> 
     <!-- content goes here --> 
     <div class="footer"> 
      <!-- footer stuff goes here --> 
     </div> 
    </div> 
</div>

CSS：

.main { 
    min-height:100%; 
    margin-left:auto; 
    margin-right:auto; 
    position:relative; 
} 
.header { 
    // height, width, margin, position 
} 
.animater { 
    // empty 
} 
.footer { 
    bottom:0px; 
    position:absolute; 
}

当我加载网页和内容比我的屏幕小得多，一切都很完美。页脚按照假设位于屏幕的底部。

我现在使用CSS关键帧为animater设置动画。当动画结束时，我将替换animater的内容并将其重新激活。当内容再小一点时，页脚就在我的animater的顶部。但是，当我“手动”重新加载页面（以便内容不获得动画效果）时，页脚正确定位。

所以我需要一个页脚，它位于内容的底部，无论内容的高度如何。我不能给动画者最小高度，因为它不在页面顶部。

来源

2013-01-21 Julian F. Weinert

试过像[CssStickyFooter（http://www.cssstickyfooter.com/）了吗？ PS。有助于了解您需要/希望支持哪些浏览器。 – Jeroen

当您为关键帧设置动画时，是否默认回到某个位置：相对？如果您在关键帧的末尾再次设置它，它有帮助吗？ – Brian

不是。将其设置为相对会使页脚粘在动画的底部。但是动画师并没有进入页面的底部。我想支持大多数主流浏览器，如Safari，FF，如果可能的话也IE10 + –

我做的这个例子显示了让页脚停留的最小css。 http://jsfiddle.net/meBv3/

的HTML

<div class="wrapper"> 
<div class="page"> 
    page here 
</div> 
<div class="footer"> 
    Content for class "footer" Goes Here 
</div> 
</div>

的CSS

/* THIS IS THE MIN STYLE NEEDED TO GET THE FOOTER TO STAY DOWN */ 

html, body{ 
height:100%; /* to keep .footer on bottom */ 
margin:0; /* to get rid of scroll bar, because (100% + default margin = scroll) */ 

} 
.wrapper { 
min-height: 100%; /* to keep .footer on bottom */ 
position: relative; /* must be relative or .footer will cover content */ 
} 
.page { 
padding-bottom:2.2em; /* MUST have padding on the bottom => .footer, or .footer will cover content 8*/ 

} 
.footer { 
position: absolute; /* to keep .footer on bottom */ 
bottom: 0px; /* to keep .footer on bottom */ 
height:2em; /* height must be smaller then .page's bottom padding */ 

}

来源

2013-01-21 15:34:02

就像我在我的问题中说的，我已经得到它的工作。但问题在于内容的高度动态变化。然后页脚不再粘在底部。 –

用我的代码'footer'总是在'page'下面 –

页脚底部的页脚

回答

相关问题