html – 当页面和页脚都设置为宽度时,页眉和页脚的间隙是否正常：100％？

问题

使用我的手机查看网站时,我正在创建该网站,并且似乎与我预期的行为不同？

我有一个截图来说明智能手机屏幕上的问题.

智能手机视图

正如您所看到的那样,页眉和页脚的宽度不会像应该的那样扩展100％,并且在使用桌面浏览器查看时也会如此.

桌面视图

标题CSS

#banner {

    background-image: url(images/images/bannersketchBG.jpeg);
    float: left;
    height: 100px;
    width: 100%;
    font-size: 36px;
    font-style: italic;
}

#banner1 {
    float: left;
    height: 50px;
    font-style: normal;
    margin-top: 10px;
    padding-left: 10px;
    color: #FFF;
    font-size: 24pt;
    top: 0px;
}

#banner2 {
    float: left;
    height: 30px;
    width: 410px;
    font-size: 14pt;
    font-style: italic;
    padding-left: 30px;
    color: #FFF;
}

页脚CSS

.footer {
    background-color: #2E2E2E;
    word-spacing: normal;
    float: left;
    color: #FFF;
    font-weight: bold;
    width: 100%;
    height: 100px;
    bottom: 0px;

}

HTML

头

<div align="center">
          <div id="banner">
          <div id="logo"><img src="images/Joel-Compass-black.png" width="119" height="95" alt="CCFS"></div>
            <div id ="banner1">Columbus Car Finder Group</div>
            <div id ="banner2">"Exploring your Needs"</div>
          </div>
        </div>

页脚

<div class="footer">

<div class="footercontainer">


   <div id="footerTabsContainer">
     <div class='tab one'>
        <ul>
          <li><a href="#">Find My Car</a></li>
        </ul>
     </div>
      <div class='tab two'>
        <ul>
          <li><a href="#">About Us</a></li>
        </ul>
      </div>
      <div class='tab three'>
        <ul>
          <li><a href="#">How it Works</a></li>
        </ul>
      </div>
       <div class='tab three'>
        <ul>
          <li><a href="#">How it Works</a></li>
        </ul>
      </div>
      <div class='tab five'>
        <ul>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </div>
      <div class='tab six'>
        <ul>
          <li><a href="#">Home</a></li>
        </ul>
     </div>

    </div>
    <div class="footerinfo">Web Design - <a href="index.html">CundyTech </a>&nbsp;&nbsp;&nbsp;&nbsp;copyright South West Car Finder 2013</div>
     </div>

    </div>

我注意到背景图像也在同一点切断了,所以这可能是溢出问题吗？！

任何帮助或指针将不胜感激！

PS我知道我没有得到正确使用ID和Classes的css的更好点,但我仍在学习所以请不要太讨厌我！

解决方法

不要将div设置为100％宽度,默认情况下会展开.您可以尝试删除宽度属性(从页脚和标题)并将最小宽度设置为与您的内容相同(它是固定宽度对吗？).

您是否有我们可以访问的网站链接？可以轻松测试Chrome / Firefox开发人员工具的功能.