Question

我希望页脚（带有地址和社交图标）位于页面底部，之后没有额外的内容（因此无法向下滚动）

我也希望它在最底层

上完美运行

但是当内容没有占据整页高度时，它就搞乱了...... 像这里：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>

感谢您的时间！

Answer 1

将页脚设置为位置：固定;底部设置为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;
    }

Answer 2

由于看起来你有一个固定的高度页脚，所以将body元素的底部填充设置为等于页脚的高度，然后将页脚绝对放在页面底部。

body { 
  padding-bottom:50px;
}

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

你也不需要带有类.push的空元素，也不需要使用class sticky-footer-wrapper

对元素进行负边距

Answer 3

看起来你在此之后：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;
}

通过设置包装器填充屏幕，然后应用与页脚相同高度的负边距，它会将页脚推离屏幕，然后将其带回负页边距的页面底部。小心顶部和底部填充，您需要将其添加到包装器的负边距，因为它将有助于整体高度。

粘性页脚css修复

3 个答案: