Question

我正在使用此网站 - http://agencymaiclientpages.com/phononic/cms/

其中一个要求是页脚到达页面底部。我知道有高度：身体和html需要100％的值，但我尝试的任何组合（内容区域内有几个元素） - 它只是不起作用。我尝试将所有主要内容放入100％，没有，在堆栈中尝试了几个元素，仍然没有。我究竟做错了什么？或许，我错过了什么？

我甚至尝试删除一些元素（#primary），因此堆叠不是那么“高”，但是页脚要么位于屏幕下方（因此需要滚动），要么保持在主要内容区域的正下方。

Answer 1

类似的东西：

.site-footer {
color: #ddd;
font-size: 14px;
font-size: 1.4rem;
text-align: center;
position: fixed;
bottom: 0px;
left: 50%;
margin-left: -120px;
}

您的问题需要更多信息...

Answer 2

试试这段代码，它会有所帮助：

.my_footer {
position : absolute;
bottom : 0px;
color: #0f0;
padding : 0 auto;
font-size: 16px;
font-size: 1.0rem;
text-align: center;
left: 50%;
}

位置：绝对; 和底部：0px; 会将页脚放置在页面的foo上。

Answer 3

页脚到底。

CSS：

.site-footer {
    bottom: 0;
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    font-size: 1.4rem;
    text-align: center;
    color: #ddd;
}

从某些地方删除填充和边距，以便所有主要内容都在一个页面中。例如：

.site-footer {
     padding: 1em 0;
}
.menu-main-container {

    margin-top: 30px;
}
p {
    margin-bottom: 1.5em;
}

因为你的页脚没有任何背景颜色所以当主内容div更大时，页脚重叠并且看起来不太好。

Answer 4

您需要固定定位。这将确保您的页脚位于页面底部：

.site-footer {
  position:fixed;
  bottom:0;
  width:100%;
  max-width:100%;
}

但要小心，如果窗口高度为“小”，则会切割主要内容。因此，根据您的主要内容，您只能在某个垂直高度后应用固定定位，例如：

@media (min-height:600px) {
  /*fixed positioning here*/
}

底部的页脚 - 100％高度

4 个答案: