CSS将页脚保留底部并扩展内容

问题描述：

我正在构建页面HERE，并且遇到了页脚问题。我已经做了大量的研究，查看粘脚，并将所有东西都包裹在容器中......而我的头部正在旋转。CSS将页脚保留底部并扩展内容

该网站的目标是显示右侧的歌词，因为在左侧点击标题，它的功能奇迹般地出色。问题是，页脚不会随歌词一起移动...

您的帮助非常感谢！

寻求调试帮助的问题（“为什么不是这个代码工作？”）必须包含所需的行为，特定的问题或错误以及在问题本身中重现问题所需的最短代码。没有明确问题陈述的问题对其他读者无益。请参阅：如何创建[mcve]。另外，请阅读[我的网站或项目中的某些内容不起作用。我可以只粘贴一个链接吗？]（https://meta.*.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste -a链接到它）。 –

答

当您对任何元素使用position:absolute时，您必须将其父元素添加到position:relative，否则它不起作用。

body { 
    position: relative; 
    padding-bottom: 50px; 
}

，或者如果你不想在正文中添加这则只是包装上像.wrapper一个父DIV和这个CSS中，所有的div。

<div class="wrapper"> 
    <div class="header"></div> 
    <div class="banner"></div> 
    <div class="container clearfix"></div> 
    <footer></footer> 
<div>

另外补充clearfix类container DIV因为它有float元素

辉煌，谢谢！这些方法之一是否比其他方法更好？ –

我更喜欢第二种方法将所有div封装在一个父div中。 –

答

您可以修复或使用CSS使粘页脚或者你可以把这个CSS为你footer。

.footer-class{ 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    width: 100%; 
    z-index: 999; 
}

的位置是固定的页脚从来没有在任何页面移动。
底部0将固定页脚在底部。
向左和向右0将把页脚放在屏幕上。
宽度100％将显示全宽。
z-index将显示在前面。放置一切将落后页脚。

CSS将页脚保留底部并扩展内容

相关推荐