Question

我有一个网站，我正在为所有页面添加页脚。在除页面右侧框之外的所有页面上，页脚都保留在底部。在该页面上，页脚显示浮动到文本的左侧，而不是位于应该位于底部的位置。以下是该特定页面的代码：

HTML

<aside class="expert">
    <h2>Always a Satisfied Customer</h2>
    <ul class="b">
        <li>Upfront Pricing</li>
        <li>Affordable Rates</li>
        <li>Courteous and Respectful</li>
        <li>Always On Time</li>
    </ul>
</aside>

<aside class="refer">
    <p>I would recommend EJP to anyone and everyone!  They showed up, looked at my issue, and fixed it promptly.  They are simply the best!  <br />-Tim S.</p>
</aside>

<p>EJP Electric offers repairs, upgrades, and installations, delivering high customer satisfaction by getting the job done right the first time.</p>

<footer>
    <div id="footer">
        <address>EJP Electric<br />
                 8603 E M115<br />
                 Cadillac, MI 49601<br />
                 231-775-3799<br />
                 <a href="mailto:ray@ejpelectric.com">Email</a>
        </address>
    </div>
</footer>

CSS

.expert {
    background-color: white;
    display: block;
    border: solid;
    float: right;
    right: 20px;
    padding: 3px;
}

.refer {
    background-color: white;
    border: solid;
    float: right;
    clear: right;
    width: 150px;
    display: block;
    margin-top: 5px;
    padding: 5px;
}


#footer {
    position: absolute;
    width: 600px;
    font-size: 12px;
    float: left;
}

Answer 1

您应该使用clear属性清除浮动：

clear CSS属性指定元素是否可以在旁边在它之前的floating元素或必须向下移动（清除）在他们之下。

footer {
  clear: both;
}

.expert {
  background-color: white;
  display: block;
  border: solid;
  float: right;
  right: 20px;
  padding: 3px;
}
.refer {
  background-color: white;
  border: solid;
  float: right;
  clear: right;
  width: 150px;
  display: block;
  margin-top: 5px;
  padding: 5px;
}
#footer {
  position: absolute;
  width: 600px;
  font-size: 12px;
  float: left;
}
footer {
  clear: both;
}

<aside class="expert">
  <h2>Always a Satisfied Customer</h2>
  <ul class="b">
    <li>Upfront Pricing</li>
    <li>Affordable Rates</li>
    <li>Courteous and Respectful</li>
    <li>Always On Time</li>
  </ul>
</aside>

<aside class="refer">
  <p>I would recommend EJP to anyone and everyone!  They showed up, looked at my issue, and fixed it promptly.  They are simply the best!  <br />-Tim S.</p>
</aside>

<p>EJP Electric offers repairs, upgrades, and installations, delivering high customer satisfaction by getting the job done right the first time.</p>

<footer>
  <div id="footer">
    <address>EJP Electric<br />
      8603 E M115<br />
      Cadillac, MI 49601<br />
      231-775-3799<br />
      <a href="mailto:ray@ejpelectric.com">Email</a></address>
  </div>
</footer>

Answer 2

根据HTML5语义，您的标记不正确，当然如果它不仅仅是其中的一部分，您可以在此处阅读：html5doctor

现在关于你的问题：

html, body, #wrap { height: 100%; }
body > #wrap {height: auto; min-height: 100%;}

#main {
    padding-bottom: 150px; /*should be the same as footer height*/
}
#footer { 
    position: relative;
    margin-top: -150px; /*negative value of footer height*/
    height: 150px;
    clear: both;
} 

<div id="wrap">
    <div id="main"></div>
</div>
<div id="footer"></div>

页脚没有停留在底部

2 个答案: