在文本结束前停止的页脚背景

Question

我的网站末尾有一个灰色的页脚，但由于某种原因，背景在文本结束前停止。

#footer {
  background-color: #565656;
  color: white;
  text-align: left;
  padding: 1% 5%;
  height: 10%;
}

<div id="footer">
  <span style="float:left;">
    <b>Contact Us</b><br/>
    Email: xxxxxx.xxxxxx@gmail.com<br/>
    Contact Phone: +86-769-xxxxxxxx<br/>
    Contact Fax: +86-769-xxxxxxxx<br/>
    Company Address: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br/>
  </span>
  <span style="float:right;">
    <b>Follow Us</b><br/>
  </span>
</div>

Answer 1

尝试使用浏览器的检查功能来查明问题。 （右键单击 - ＆gt;检查）。

可能是因为你限制了身高。

Answer 2

你正在使用％填充导致问题而且高度较低

#footer{   

 background-color: #565656;
    color: white;
    text-align: left;
    padding: 37px;
    height: 22%;
    }

Answer 3

#footer {
        background-color: #565656;
        color: white;
        text-align: left;
        padding: 1% 5%;
        height: auto;  /* MODIFICATION */
        position: absolute;  /* MODIFICATION */
    }

制作position:absolute;并将height更改为auto

＆＃13;

＆＃13;

#footer {
    background-color: #565656;
    color: white;
    text-align: left;
    padding: 1% 5%;
    height: auto;
    position: absolute;
}

＆＃13;

<div id="footer">
<span style="float:left;">
<b>Contact Us</b><br/>
Email: xxxxxx.xxxxxx@gmail.com<br/>
Contact Phone: +86-769-xxxxxxxx<br/>
Contact Fax: +86-769-xxxxxxxx<br/>
Company Address: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br/>
</span>
<span style="float:right;">
<b>Follow Us</b><br/>
</span>
</div>

＆＃13;

＆＃13;

＆＃13;

此处正在使用JSFIDDLE：API for Router

Answer 4

你需要清除浮子。浮动框从流中取出并且不影响父框，浮动所有子项有效地使父项为空，它将折叠到零高度。

import scalaz.std.list._
import scalaz.syntax.traverse._

val scripts: List[Script[A]] = ???
val script: Script[List[A]] = scripts.sequence[Script, A]

或

#footer {
  overflow: auto;
}

Answer 5

问题是在计算容器的高度时会忽略浮动元素。

在我看来，您的情况下的最佳解决方案是稍微更改布局并从左侧范围中移除float: left。

<div id="footer">
<span style="float:right;">
<b>Follow Us</b><br/>
</span>
<span>
<b>Contact Us</b><br/>
Email: xxxxxx.xxxxxx@gmail.com<br/>
Contact Phone: +86-769-xxxxxxxx<br/>
Contact Fax: +86-769-xxxxxxxx<br/>
Company Address: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br/>
</span>
</div>