CSS通过扩展内容使页脚保持在底部

Question

我正在构建一个页面HERE并且我在页脚上遇到了问题。我已经做了很多研究，研究粘性页脚并将所有东西都装在容器中......我的头在旋转。

该网站的目标是在左侧点击标题时显示右侧的歌词，并且奇迹般地工作。问题是页脚不会随着歌词一起移动......

非常感谢您的帮助！

Answer 1

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

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

或者如果你不想在体内添加它，那么只需将所有div包装在一个父div上，如.wrapper和此css中。

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

还在clearfix div中添加container类，因为它具有float元素

Answer 2

您可以使用 >library(wordcloud) Loading required package: RColorBrewer Warning message: package ‘wordcloud’ was built under R version 3.4.2 修复或制作粘性页脚，或者您可以为此CSS添加此CSS。

footer

• 位置固定，页脚永远不会在任何页面中移动。
• 底部0将页脚固定在底部。
• 左右0将页脚放在屏幕上。
• 宽度100％将显示全宽。
• z-index将显示在前面。将所有内容放在页脚后面。