无法定位页脚 CSS答案

【问题标题】：cannot position a footer CSS无法定位页脚 CSS
【发布时间】：2014-03-23 02:59:57
【问题描述】：

我正在关注this 制作页脚的教程，但结果与预期不符：

我的html和css在这个JSFiddle

或以下：

  <body>
  <div class="wrapper">
<div id="container">
    <div id="header">
        <div class="wrap">
            <div id="menuProfile">
                <div id="logotext">K-Panel &bull; Kerio Tools Management</div>
            </div>
        </div>
    </div>
    <div class="fix"></div>
    <div id="subheader">
        <div id="submenu" class="wrap">
            <div id="logocliente">
                <a href="<?php echo $this->baseUrl(); ?>/"><img height="50"
                    id="logoIscrittoTestata"
                    src="<?php echo $this->baseUrl(); ?>/KPanel_logo_2014_58x224.png"></a>
            </div>
        </div>
    </div>
    <div class="fix separatore"></div>
    <div id="page">

        <div id="right">
        </div>
    </div>
    <div id="push"></div></div>
<div id="footer">
        <strong>Freelands</strong> > Via Emilia Ponente, 479, 40132 Bologna (Italy) > Tel +39 051 7402558 > Fax +39 051 729153 > C.F. e P.IVA 03236491209 > <a
            id="footerEmailAzienda" href="mailto:info@freelands.it">info@freelands.it</a>
</div>

CSS：

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: middle;
background: transparent;
 }

 body {
font-family: Helvetica, Verdana, Arial, Tahoma;
font-size: 11px;
line-height: 1;
text-align: center;
color: #404040;
 }

 html,body {
height: 100%;
margin: 0px;
 }

 #container {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px;
 }

 #footer {
background-color: #0082C0;
color: #FFFFFF;
padding-top: 15px;
 }

 * {
margin: 0;
 }

 body, html {
width: 100%;
height: 100%;
font-size: 16px;
font-family: calibri, gill sans, arial;
 }

 .wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -35px; /* the bottom margin is the negative value of the footer's height */
 }

 .footer, .push {
height: 35px; /* .push must be the same height as .footer */
 }

 #footer{
font-size: 12px;
font-family: calibri, gill sans, arial;
color: black;
text-align: center;
width: 100%;
 }

 #header{
display:block;
clear:both;
margin-top:20px;
 }

【问题讨论】：

如果您正在寻求帮助，为什么不说明您实际遇到的问题是什么？
你有很多包装器在进行。我建议的第一件事是摆脱一些看起来有点无关紧要的包装器和容器。

标签： css footer

【解决方案1】：

您需要在页脚中添加position:fixed; 以使其保持不变。要使其停留在底部，请添加bottom:0;

WORKING DEMO

代码更改：

 #footer{
font-size: 12px;
font-family: calibri, gill sans, arial;
color: black;
text-align: center;
width: 100%;
    position:fixed;
    bottom:0px;
 }

希望这会有所帮助。

【讨论】：

然后添加z-index 以进行相应的调整。 - @克里斯托夫
你误会了...实际上不需要固定位置和z-indexing...
好的，我该如何正确表达它。您的解决方案使用position:fixed。这是不好的。不要这样做。现在知道了吗？
但是他提到的链接和他想要实现的输出在固定位置是可行的。我听起来清楚吗？？ - @克里斯托夫
让我们continue this discussion in chat

【解决方案2】：

要在底部粘贴页脚，您需要将其设为 position:fixed bottom:0; 并添加 margin-top:(height of your footer);

#footer {
    background-color: #0082C0;
    color: #FFFFFF;
    padding-top: 15px;
    position:fixed;
    bottom:0;
    margin-top:30px; /* height of the footer */

}

JsFiddle

【讨论】：

你们为什么对固定位置如此着迷？它很乱，容易出错，绝对不需要......
你能解释一下它是怎么搞砸的，所以我会知道要遵循什么标准吗？
请参阅chat.stackoverflow.com/rooms/48073/… 继续我与 Nathan 的讨论，我在那里解释了问题