绝对定位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。

看我的小提琴。