绝对定位div需要固定页脚的文档底部边距

Question

不知怎的，我无法弄清楚我错过了什么......

我尝试在两个absolute栏（页眉和页脚）之间放置一些fixed div。标题包含一些标签和页脚包含版权。我想使用窗口的滚动条而不是溢出的div，我知道它应该是可能的！

每个绝对定位的div应该带有额外的边距，这样div的底部不会在页脚后面消失。

它应该是这样的：

我的问题片段在jsfiddle上可用here。

我的HTML：

<ul class="cf tabs">
    <li>Tab 1</li>
    <li>Tab 2</li>
</ul>
<div style="margin-top: 40px; padding-bottom: 30px; position:relative">
    <div style="position:absolute;top:300px; height:100px; width: 250px; left:200px; border: 1px solid purple;">aaa</div>

    <div style="position:absolute;top:0px; height:100px; width: 100px; left:100px; border: 1px solid purple;">bbb</div>

    <div style="position:absolute;top:450px; height:100px; width: 250px; left:400px; border: 1px solid purple;">ccc</div>
</div>
<div class="cf footer">Copyright &copy;</div>​

我正在使用的样式表：

    ul.tabs {
        list-style-type: none;
        list-style-position: outside;
        padding:5px;
        margin: 0;
        position:fixed;
        top:0;
        z-index: 999;
        background-color: white;
        left:0;
        right:0;
        border-bottom: 1px solid green;
        opacity: 0.7;
    }
    ul.tabs li {
        float: left;
        margin:1px;
        padding: 4px 10px 2px 10px;
        border: 1px solid black;
    }


    div.footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right:0;
        background-color:#DEDEE9;
        border-top: 3px outset #BBBBBB;
        padding: 5px;
        opacity: 0.6;
    }

    .cf:before,
    .cf:after {
        content: " "; 
        display: table; 
    }
    .cf:after {
        clear: both;
    }​

你们有任何提示吗？

额外信息 正如您在附图中看到的那样，右下角的方形div的紫色边框与固定页脚重叠。我不想要这个。应该在某处给出一个底部边距，这样每个div都有一个额外的边距，所以它应该匹配页脚的顶部

Answer 1

这是我提出的解决方案。将最底部的绝对位置div包裹在另一个div内，其中底部边距等于页脚高度和边框。我给了它课.inner。

查看我的fiddle。

Answer 2

将底部填充添加到文档body，等同于页脚的高度：

body {
     padding-bottom: 31px;
}

（JSFiddle似乎不允许你修改body元素的样式，所以我不能发布一个小提琴。它应该可以工作。）

Answer 3

不要使用绝对定位，而是执行以下操作：

保证金 - 左：800px

保证金 - 上限：500px