Question

我试图让我的页脚（具有背景颜色，没有背景图像）始终占据视口（或屏幕）的100％。尽管我尝试了一切，但页脚与右侧有差距。我认为这显然是宽度，高度，填充或边距问题，但我不能为我的生活弄明白。下面是我的html和css代码（在你要求或跳过我使用表格之前，这就是招聘我的人做事的方式。他们做了很多html电子邮件新闻通讯，你必须使用表格。这是html必须完成的方式。我意识到这不是最佳实践，但我这样做的方式是支付给我的人希望它能够完成：）

另外，我需要获取位于页脚正上方的取消订阅部分，使其右侧具有与左侧相同的边距（即您应该能够看到左侧和右侧的白色）。也许是这个取消订阅部分搞砸了，我不知道。任何帮助都会非常感激（无论如何，我的漫无边际，这是代码）。

如果您不想仔细阅读以下代码，请点击此处链接：

http://hoppedupdesigns.com/evolv/clients/apics/epc/form.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;
}

非常感谢你们。你太棒了。

杰森

Answer 1

在页面上模仿innerContent div的行为应该有所帮助。

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

在上面的div中，innerContent定义了0 110px 0 110px的填充，然后mainHeading定义了100％的宽度，限制在innerContent div的限制内。

您的unsubscribeTable宽度为100％，后跟填充，大于屏幕的100％，并使您的div向右扩展页面并添加水平滚动条。通过将该div嵌套在限制其宽度的另一个div中，100％将指代父div的100％，而不是整页的100％。然后父div可以定义填充。即：

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

除了现有的unsubscribeTable CSS之外，添加以下CSS将限制unsubscribeTable宽度。

#unsubscribeWrapper {
  padding: 0 110px;
}

类似的问题会影响#footer。在这种情况下，由于您希望背景延伸100％的宽度，因此您不需要嵌套div。但是，您可以使用左侧填充来从页面边缘偏移版权徽标。

Answer 2

在你的css #footer中，左右填充填充为0（而不是25px）。

这将解决您的问题。

Answer 3

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

最后box-sizing行是关键。如果没有这个，你的宽度是定位父级的100％，加 25px + 25px＆＃34;，因为默认的大小调整模型是content-box，其宽度指定了没有填充或边框或边距的内容宽度。

但是，您还遇到另一个问题，即页面中较高的内容（#unsubscribeTable）甚至更宽，因此您会得到一个水平滚动条，强制您的网页太宽。同样，您已为此表指定了宽度以及填充。

一般来说，我建议从外面思考：使用适量的填充来获取外部容器的正确尺寸，并让他们的display:block（和类似的）孩子自动填充宽度，而不是明确的width参数。

Answer 4

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

width: 100%;

在#unsubscribeTable样式中。

页脚不会在屏幕上伸展100％

4 个答案: