Html 页脚赢得'；t在屏幕上100%拉伸

我试图让我的页脚（有背景色，没有背景图像）始终占据视口（或屏幕）的100%。尽管我做了很多尝试，但页脚的右边还是有一个缺口。我想这显然是一个宽度、高度、边距或边距的问题，但我一辈子都想不出来。下面是我的html和css代码（在你要求我使用表格之前，这是雇用我的人做事情的方式。他们做很多html电子邮件时事通讯，你必须使用表格。这是html必须使用的方式。我意识到这不是最佳做法，但我是按照付钱给我的人希望的方式做的：）

另外，我需要让页脚正上方的“取消订阅”部分在右边和左边有相同的边距（即，你应该能够看到左边和右边的白色）。也许是这个“取消订阅”部分把事情搞砸了，我不知道。如果有任何帮助，我将不胜感激（不管怎样，我说的够多了，代码在这里）

如果您不想仔细阅读下面的代码，这里有一个指向该页面的链接：

HTML代码：

        <!-- start of unsubscribeTable div -->
            <div class="tableLeft" id="unsubscribeTable">

               <table border="0" cellspacing="3" cellpadding="3">
                    <tr>
                        <td valign="top"><input type="checkbox" name="chkOptOut" id="chkOptOut"></td>
                        <td>
                            <label for="chkOptOut">Unsubscribe</label><br>
                            <p class="optout_message">Opt-out of all APICS communications</p><br>
                            <p class="optout_warning">This option will remove you from all APICS email communciations excluding transactional email and email related to membership status.</p>
                            <div>
                                <a href="#" class="button" id="cmdOptOut">Confirm Opt-Out</a>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
            <!-- end of unsubscribeTable div -->

        <!-- start of footer div -->
        <div id="footer">
            <p class="copyright">&copy;2013 APICS</p>
           <ul id="footerNav">
                <li><a href="http://www.apics.org/privacy-policy" target="_blank">Privacy Policy</a></li>|
                <li><a href="http://www.apics.org/about/contact" target="_blank">Contact Us</a></li>|
                <li><a href="http://www.apics.org/terms-of-use" target="_blank">Terms of Use</a></li>
            </ul> 
        </div>
        <!-- end of footer div -->

    </div>
    <!-- end of wrapper div -->

</body>
</html>

CSS Code:

body {
    line-height: 20px;
    font-family: arial, sans-serif;  
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

#wrapper {
    width: 100%;
}

/* 1.  
*         ***** UNSUBSCRIBE SECTION *****
*/
#unsubscribeTable {
    background: #F1F1F1;
    color: #333;
    width: 100%;
    clear: left;
    padding: 30px 25px 15px 25px;
    margin: 0 0 15px 85px;
}

/* 2.  
*         ***** FOOTER *****
*/
#footer {
    background: #666;
    color: #bdbebf;
    border-top: 8px solid #838d94;
    clear: both;
    height: 100px;
    padding: 30px 25px 15px 25px;
    width: 100%;
}

#footerNav {
    float: right;
}

#footerNav li {
    display: inline;
    padding: 20px;
}

#footerNav a {
    text-decoration: none;
    color: #bdbebf;
    font-size: 14px;
}

取消订阅

选择退出所有APICS通信
此选项将从所有APICS电子邮件通信中删除您，不包括事务性电子邮件和与会员身份相关的电子邮件
©；2013 APICS

|
|


CSS代码：
身体{
线高：20px；
字体系列：arial，无衬线；
-webkit框大小：边框框；
-moz框大小：边框框；
-ms框尺寸：边框框；
框大小：边框框；
}
#包装纸{
宽度：100%；
}
/* 1.  
*******取消订阅部分*****
*/
#取消订阅{
背景#f1f1；
颜色：#333；
宽度：100%；
清除：左；
填充：30px25px15px25px；
利润率：0.15像素85像素；
}
/* 2.  
*******页脚*****
*/
#页脚{
背景:#666；
颜色：#bdbebf；
边框顶部：8px实心#838d94；
明确：两者皆有；
高度：100px；
填充：30px25px15px25px；
宽度：100%；
}
#页脚导航{
浮动：对；
}
#李国宝{
显示：内联；
填充：20px；
}
#页脚导航a{
文字装饰：无；
颜色：#bdbebf；
字体大小：14px；
}

非常感谢各位，你们太棒了

Jason

在css页脚中，将左右边距设置为0（而不是25px）

那会解决你的问题

#footer {
    padding: 30px 25px 15px 25px;
    width: 100%;
    box-sizing: border-box;
}

最后一行是关键。没有它，您的宽度是“定位父项的100%，加上25px+25px”，因为默认的框大小模型是

内容框

，其中您的宽度指定内容的宽度，没有填充、边框或边距

但是，您还有另一个问题，页面上方的内容（

#unsubscribedable

）甚至比这更宽，因此您会得到一个水平滚动条，迫使页面太宽。同样，您已经为此表指定了一个宽度和填充

---

一般来说，我建议从外到内思考：让外部容器具有适当的大小和适当的填充量，并让它们的

显示：block

（以及类似内容）孩子们自动填充宽度，没有显式的

width

参数。

好的，我刚刚看到了问题。您的“取消订阅”表会拉伸整个表。只需删除这行CSS：

width: 100%;

---

在#unsubscribable样式中。

模仿页面上较高的innerContent div的行为应该会有所帮助

<div id='innerContent'>
  <div id='mainHeading'>

---

#页脚也有类似的问题。在这种情况下，由于您希望背景扩展100%的宽度，因此不需要嵌套的div。但是，您可以使用左边的填充将版权徽标从页面边缘偏移。

您应该只发布与您的问题相关的代码。我恳请建议以后共享一个精简的测试用例，这样用户就可以对问题进行迭代，然后与您共享。请花时间删除您的代码，这样您就可以将其缩减到重现问题所需的位。字体颜色或大小是否会导致问题？如果不是，请删除它们。该表如何？哦，删除它确实会改变问题？然后离开这对我们来说很重要，同时你也会想，“为什么那个特定的元素需要在那里导致这个问题？”感谢这帮了大忙。这解决了页脚的问题，但我仍然需要取消订阅部分在左右两侧留出空间，并将文本向下放置，与上面的复选框对齐。

<div id='unsubscribeWrapper'>
    <div id='unsubscribeTable'>

#unsubscribeWrapper {
  padding: 0 110px;
}