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

不知怎的,我无法弄清楚我错过了什么……

我尝试在两个固定栏(页眉和页脚)之间放置一些绝对div.标题包含一些标签和页脚包含版权.我想使用窗口的滚动条而不是溢出的div,我知道它应该是可能的！

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

它应该变成这样：

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

我的HTML：

• Tab 1
• Tab 2

aaa

bbb

ccc

Copyright ©

​

我正在使用的样式表：

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都有一个额外的边距,所以它应该匹配页脚的顶部