Question

我正在使用this教程来制作页脚，但结果并不像预期的那样：

Footer

我的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;
 }

Answer 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;
 }

希望这有帮助。

Answer 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

无法定位页脚CSS

2 个答案: