当页眉和页脚的宽度都设置为100％时，意外的页眉和页脚右侧的空白右侧？

问题当页眉和页脚的宽度都设置为100％时，意外的页眉和页脚右侧的空白右侧？

在使用我的手机来查看一个网站我创建的网站出现，似乎采取不同的行动比我期望？

我有一个屏幕截图来演示上述智能手机屏幕上的问题。

智能手机视图

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

来源

2014-03-04 Dan Cundy

你可以发布你的HTML以及好吗？ – BoxMan0617

整页或只是页眉和页脚的片段？这是相当冗长的，可能不是最容易解决的问题。 –

只需要页眉和页脚的片段。 – BoxMan0617

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

您有链接到我们可以访问的网站吗？很容易测试Chrome/Firefox开发人员工具的作用。

来源

2014-03-04 23:24:40 Linek

http://cundytech.com/SWCF/indextest4.php# –

仅供参考，页脚行为怪异，因为我试图实现粘脚注解决方案，但尚未成功。 –

由于float：left属性适用于所有内容，因此您的布局被破坏。你必须重新设计，而不是把所有的东西都应用于浮动。 Div默认为100％宽度，0填充，0余量。你需要做的是为你的div设置高度（因为它看起来你想要这些固定的高度。 – Linek

这通常发生在您的内容不足以填满屏幕时。我个人使用calc()来整理它。你可以试试这个。

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

它所做的是，它计算min-height为your_content至100％ - 你的头的高度 - 您的页脚的高度;

来源

2014-03-04 22:54:03

Calc是否完全支持？ – BoxMan0617

这是一个类似的解决方案，我相信粘滞的页脚，这是我遇到的问题，但与我所问的问题无关。（我认为）这是页脚和页眉的宽度没有填满屏幕100％的移动设备上获得最好的我。 –

当前版本是。这里http://caniuse.com/calc –

不要浮动您的#banner或.footer。检查定位这个很酷的教程，以获得更好的主意：CSS Learn Positioning

来源

2014-03-04 23:09:19 BoxMan0617

我现在有浮动：没有和没有宽度设置，仍然会出现问题？ –

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

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

通知我们留出了顶级属性......这是因为我们希望这种情况可以用内元素的高度自动设置。

你也可以试试position: absolute;和调整对身体的底部填充到，结果，可将清除的主体内容，而不是坚持视。

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

来源

2014-03-04 23:38:52 nickspiel

我是否正确地说，如果我改变了页脚定位为固定的，当浏览器高度改变时页脚将保持底部：0;但它也会覆盖内容，从而隐藏下面的东西？ –

耶是正确的，如果这是不希望的使用绝对或相对 – nickspiel

正如@Linek在他的回答中所提到的，在评论中，为身体添加最小宽度样式将解决此问题。我也不得不在头上加一个最小宽度，不知道为什么身体没有做到这一点？

解决方案

的CSS

Body 
{ 
min-width:1003px; 
}

来源

2014-03-06 13:15:59

当页眉和页脚的宽度都设置为100％时，意外的页眉和页脚右侧的空白右侧？

回答

相关问题