Question

问题

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

我有一个截图，用于在智能手机屏幕上显示问题。

智能手机视图

screenshot

正如您所看到的那样，页眉和页脚的宽度不应超出100％，并且在使用桌面浏览器查看时也是如此。

桌面视图

screenshot

标题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的更好点，但我还在学习所以请不要太讨厌我！

Answer 1

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

您是否有我们可以访问的网站链接？可以轻松测试适用于Chrome / Firefox开发人员工具的内容。

Answer 2

当您的内容不足以填满屏幕时，通常会发生这种情况。我个人使用calc()来解决它。你可以试试这个。

.your_header{
  height:100px;
}
.your_content{
  min-height:calc(100% - 300px);
}
.your_footer{
  height:200px;
}

它的作用是为min-height计算your_content到100％ - 标题的高度 - 页脚的高度;

Answer 3

不要漂浮你的#banner或.footer。查看这个很酷的定位教程，以获得更好的想法：CSS Learn Positioning

Answer 4

更改要修复的页脚的位置。

positioning: fixed; // will make the footer stick to the base of the viewport.
right: 0; // fill space to right
bottom: 0;  // stick to the bottom of page
left: 0; // fill space to left

注意我们省略了top属性...这是因为我们希望通过内部元素的高度自动设置。

您可能还想尝试position: absolute;并调整正文上的底部填充以提供清除正文内容但不会粘贴到视口的结果。

这应该让你朝着正确的方向前进。

Answer 5

正如@Linek在他的回答中所提到的，在评论中，向body添加min-width样式将解决这个问题。我还必须在标题中添加一个最小宽度，不知道为什么身体不会同时做到这两个？

<强>解决方案

的CSS

Body
{
min-width:1003px;
}

当两者都设置为宽度：100％时，页眉和页脚的意外间隙是否正确？

5 个答案: