Question

我在这里遇到一些问题。我有以下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>

我的问题是，如果分辨率低于内容，则页脚不会保持页面的宽度，如下所示： enter image description here

我已经创建了这个小提示，也显示了问题：http://jsfiddle.net/pmb1vbdh/1/
看看页脚如何不随桌子展开并留出空白区域？我怎么能解决这个问题？谢谢！

Answer 1

有效。检查一下。

＆＃13;

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);
}

＆＃13;

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

＆＃13;

编辑以获取其他人的评论＆＃39;回答;

demo

Answer 2

尝试将right: 0;添加到您的CSS而不是width: 100%：

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

Answer 3

Gops AB是对的。你的代码是正确的。

Answer 4

问题在于table和display:table的{{1}}

解决方案，将表设置为表。

<强> HTML：

div.content

<强> CSS：

   <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>

的 Working Demo

页脚宽度问题

4 个答案: