页脚底部 - 100％的高度

问题描述：

我在这个网站的工作 - http://agencymaiclientpages.com/phononic/cms/页脚底部 - 100％的高度

其中一项要求是，页脚转到页的底部。我知道有高度：body和html需要100％的值，但我试过的组合（内容区域有几个元素） - 它不起作用。我试图把所有的主要内容放入100％，没有任何东西，尝试了几个元素，仍然没有。我究竟做错了什么？或者，也许我错过了什么？

我甚至试图删除一些元素（#primary），所以堆叠不是很“高”，但是页脚要么低于屏幕（因此需要滚动），要么停留在主要内容区域的下方。

显示你正在试图做 – 2015-02-07 12:40:33

用'位置尝试什么：固定;'？ – 2015-02-07 12:58:26

我已经尝试了固定位置，但是页脚与小高度设备上的主要内容区域重叠。所以我认为托尼巴恩斯给出了最准确的答案，我认为这是我将使用的解决方案。 – 2015-02-07 13:42:02

答

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

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

但要小心，如果窗口的高度是“小”，将削减的主要内容。所以，这取决于你的主要内容，你只能在一定垂直高度后申请固定定位，例如像这样：

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

我也对所有的答案给予了赞扬，因为他们都会在很大程度上发挥作用。 – 2015-02-07 13:53:30

答

喜欢的东西：

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

？

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

答

试试这个代码，它会帮助：

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

的的位置是：绝对的;和bottom：0px;将使页脚被放置在页面的foo处。

答

页脚到达底部。

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较大页脚重叠它并不好看。

页脚底部 - 100％的高度

相关推荐