粘页脚CSS修复

-1

我想页脚（与ADRESS和社会图标）是在页面的底部，没有额外的后（所以没有向下滚动可能）粘页脚CSS修复

我也希望它在真底部

正是这个页面Working link

但是当内容不占据整个页面高度它是搞乱...... 喜欢这里的工作完美：At the bottom BUT adding some scrolling at the bottom 我环顾四周，但似乎无法找到完美的解决方案，我需要你的知识

.sticky-footer-wrapper { 
min-height:100%; 
} 

.push { 
overflow:auto; 
padding-bottom:200px; 
} 

footer { 
position:relative; 
margin-top:-200px; 
height:30px; 
clear:both; 
}

HTML标记

<div class="sticky-footer-wrapper"> 


<div class="push"></div> 

</div> 

<footer></footer>

谢谢您的时间！

来源

2014-02-19 francoboy7

Typo？ '' – biziclop

@ francoboy7会为你定一个固定的页脚吗？ –

@ Mr.Coder不，它不会工作。感谢回复，虽然 – francoboy7

将页脚设置为position：fixed;将其底部设置为0以下是您正在查找的示例。 http://jsfiddle.net/t9Acp/

<footer>THis is a </footer> 


    footer { 
     position: fixed; 
     bottom: 0; 
     height: 50px; 
     width: 100%; 
     background: rgba(51,51,51,.5); 
    } 
    body { 
     height: 400em; 
    }

来源

2014-02-19 23:54:46 Cam

我不想要任何固定的位置，因为它会重叠在我的内容上，并且有时会被隐藏。 – francoboy7

@ francoboy7因此，将不透明度设置为低，并且当用户翱翔时出现并消失在它之上，你甚至可以将它最小化。 – Cam

因为它看起来像你有一个固定的高度页脚设置body元素等于页脚的高度在底部填充，然后页脚绝对定位到页面的底部。

body { 
    padding-bottom:50px; 
} 

footer { 
    height:50px; 
    position:absolute; 
    left:0; 
    bottom:0; 
}

你也不需要用类.push空单元，也像你在这之后，你将需要与类粘页脚，包装

来源

2014-02-20 00:27:37

嗨谢谢你的回复，它似乎并没有工作......谢谢你 – francoboy7

看起来的元素阴性切缘：CSS sticky footer

我以前碰到类似的问题，所有的CSS都需要在那里。

编辑：你的内容包装需要有一个负边距设置为与页脚相同的高度。如果您使用填充，则只会将其进一步推下，并导致无论页面中的内容有多少都会滚动更多。

这也许应该是这个样子：

.sticky-footer-wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -30px; /* the bottom margin is the negative value of the footer's height */ 
} 
footer, .push { 
    height:30px; 
}

通过设置包装上，以填满屏幕，然后施加负缘相同的高度页脚，它推动页脚关闭屏幕，那么带来的它回到页面的底部，并带有负边距。请注意顶部和底部填充，您需要将其添加到包装的负边距，因为它会影响整体高度。

来源

2014-02-20 03:09:39 Timmah

好吧其余的地方在这里我没有写下来，但它在这里 – francoboy7

最好显示你的所有代码，如果人们可以'没有看到整个画面，他们无法提供帮助;） – Timmah

粘页脚CSS修复

回答

相关问题