粘性页脚在100％高度的网站上

问题描述：

我试图在页面上粘贴页脚，每个标签都带有100％高度。我的问题是，如果内容比显示更大，并向下滚动，页脚不再位于页面的底部。页脚保持在这样的位置：Picture of the footer 粘性页脚在100％高度的网站上

下面是一个例子：（对不起，这是错误的链接。） http://jsfiddle.net/qt3m1p4c/

<html style:"height: 100%"> 
    <body style:"height: 100%"> 
     A lot of Content 
    </body> 
    <footer style:"position: absolute; bottom: 0;"> 
     Sticky Footer 
    </footer> 
</html>

是否有人没有如何解决这个问题，无需拆卸heigth属性？

位置：固定为页脚。 – Gerard

答

您需要设置的位置是：固定您的页脚，这意味着无论你在网页上发生，该元素将站在同一个地方，here your code with changed position

.footer { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background:#ccc; 
}

但是现在页脚正前方的一些文字.. –

@MarcoGöpfrich是的，要解决这个问题，指定一些高度到你的页脚，并添加填充等于这个值你的包装:) –

答

把页脚里面的内容包装和改变CSS如下：

.pageContentWrapper { 
    padding-bottom:100px; 
    min-height: 100%; 
    position: relative; 
    box-sizing: border-box; 
} 
.footer { 
    position: absolute; 
    [...] 
}

这里的一个小提琴：（EDITED，忘了在第一添加box-sizing: border-box;）：http://jsfiddle.net/uc6y5dhs/1/

粘性页脚在100％高度的网站上

相关推荐