Absolue positionné div besoins de la marge du bas sur le document fixe le pied de page

De toute façon je ne peux pas comprendre ce que je suis en manque...

J'essaie de position d'un certain nombre de absolute divs entre deux fixed bars (en-tête et pied de page). L'en-tête contient un certain nombre d'onglets et le pied de page contient un droit d'auteur. Je veux utiliser la fenêtre de la barre de défilement et pas une débordé div et je sais que ça doit être possible!

Chaque absolue positionné div doit réaliser une marge supplémentaire, de sorte que le bas de la div ne disparaît pas derrière le pied de page.

Il devrait être quelque chose comme ceci:

Un extrait de mon problème est disponible ici sur jsfiddle.

Mon code 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>​

La feuille de style que j'utilise:

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

Avez-vous les gars avez des conseils?

Infos supplémentaires
Comme vous pouvez le voir dans l'image jointe le violet bordure des carrés des div en bas à droite, se chevauchent, le pied de page fixe. Je ne veux pas de ça. Il doit être donné de la marge du bas, quelque part, de sorte que chaque div porte une marge supplémentaire de sorte qu'il doit correspondre au dessus du pied de page

OriginalL'auteur 321X | 2012-07-11