Html 页脚宽度问题

我这里有点小问题。我有以下CSS代码：

body
{
    margin: 0 0 200px; //Same height of the footer
}
div.content
{
    display: table;
    margin: 0 auto;
}
div.main-content
{
    margin: 20px 10px;
    text-align: left;
    background-color: rgba(255, 255, 255, 0.95);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 15px;
    -webkit-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
}
footer
{
    position: absolute;
    left: 0;
    bottom: 0;
    height: 200px;
    width: 100%;
    overflow: auto;
    background-color: rgba(67, 191, 115, 0.95);
}

这样，在我使用的所有页面中：

<div class='content'>
    <div class='main-content'>
        //Page content goes here
    </div>
</div>
<footer>
    //Footer content goes here
</footer>

//页面内容在这里
//页脚内容在这里

我的问题是，如果分辨率低于内容，页脚无法保持页面宽度，如下所示：

我已经创建了这个小提琴，它也显示了这个问题：
看到页脚如何不随表格展开，而让一个空格出现了吗？

---

我怎样才能解决这个问题？谢谢

尝试添加

右侧：0到CSS，而不是
宽度：100%
：

footer {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    ...
}

它起作用了。看看这个


div.content
{
显示：表格；
保证金：0自动；
}
主要内容
{
利润率：20px 10px；
文本对齐：左对齐；
背景色：rgba（255、255、255、0.95）；
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
填充：15px；
-网络工具包盒阴影：0px 4px 5px 0px rgba（0,0,0,0.75）；
-moz盒阴影：0px 4px 5px 0px rgba（0,0,0,0.75）；
盒影：0px 4px 5px 0px rgba（0,0,0,0.75）；
}
页脚
{
位置：绝对位置；
左：0；
底部：0；
高度：200px；
宽度：100%；
溢出：自动；
背景色：rgba（671911150.95）；
}

//页面内容在这里
//页脚内容在这里
Gops AB是正确的。您的代码是正确的。
问题在于
表格
和
div.content的
显示：表格

解决方案，将一个类设置为表

HTML:

   <div class='content'>
    <div class='main-content'>
        <table class="tab">
            <strong>TABLE</strong>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </table>
    </div>
</div>
<footer>
    //Footer content goes here
</footer>

body
{
    margin: 0 0 200px; //Same height of the footer
}
div.content
{
    display: table;
    margin: 0 auto;
}
div.main-content
{
    margin: 20px 10px;
    text-align: left;
    background-color: rgba(255, 255, 255, 0.95);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 15px;
    -webkit-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
}
footer
{
    position: absolute;
    left: 0;
    bottom: 0;
    height: 200px;
    width: 100%;
    overflow: auto;
    background-color: rgba(67, 191, 115, 0.95);
}
table .tab
{
    width: 1500px;
}

为什么要使用display:table；对于div.content？我保证如果那是display:block，你就不会有这个问题。@netimp因为在某些页面中我有带有
空白：nowrap
的表，如果我使用
display:block
的话，表就会从content div中消失。即使使用
display:block
的话，空白仍然存在。这在firefox中可以正常工作。我看不到这一点空白..@Dmitry我在计算机中首先开发，还没有发送到服务器。但是检查一下这把小提琴，看看问题所在：@Ferrmolina，请看看这把小提琴。您将看到问题：您有
table.tab
，但没有
。tab
元素嵌套在table下。没关系，我会再试一次。问题是
显示：table
和
table
元素。如果他设置了正常工作的
display:block
或
display:inherit
。我需要使用
display:table
，因为
空白：nowrap
。无论如何，移除它并不能解决问题。如果分辨率低于内容，问题仍然存在