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>

还要在 container div 中添加 clearfix class 因为它有 float 元素

Answer 2

您可以使用 CSS 修复或制作粘性页脚，或者您可以只为您放置此 CSS footer。

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

页脚的位置是固定的，在任何页面中都不会移动。
bottom 0 将页脚固定在底部。
left 和 right 0 将在屏幕中放置页脚。
宽度 100% 将显示完整宽度。
z-index 会显示在前面。将所有内容放在页脚后面。

CSS 将页脚放在底部并扩展内容

CSS Keep Footer at Bottom with Expanding Content

html

css

footer