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

Question

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

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

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

它应该变成这样：

我的问题的片段可在jsfiddle 上找到。

我的 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。

看我的小提琴。

Answer 2

body为文档添加与页脚高度相等的底部填充：

body {
     padding-bottom: 31px;
}

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

Answer 3

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

边距 - 左：800px

边距 - 顶部：500px