javascript - 以较小的分辨率更改 DIV 垂直位置

Question

我需要帮助。我有 div 作为页脚，但没有固定位置。因此，如果我向下滚动页脚也会滚动。但是，如果我减小浏览器页脚的大小，则会出现错误的垂直位置。因此，如果资源管理器的分辨率较小，我需要更改垂直位置。

这是一个例子

HTML:

<div id="header">
MENU
</div>
<div id="content1">
something
</div>
<div id="footer">
</div>
<div id="content2">
something
</div>

CSS:

#header {
width: 500px;
height: 20px;
background: blue;
position: fixed;
}

#content1 {
width: 500px;
height: 560px;
background: grey;
}

#footer {
width: 700px;
height: 40px;
    background: red;
position: absolute;
opacity: 0.5;
bottom: -20px;
}

#content2 {
width: 500px;
height: 560px;
background: green;
}

JSFIDDLE 演示: http://jsfiddle.net/jiriranc/w89Yc/3/

你看到了吗？如果分辨率很大，则页脚与 div 重叠。但如果分辨率较小，div 不会重叠，而我需要这种重叠。

Answer 1

使用此 CSS

#header {
width: 500px;
height: 20px;
background: blue;
position: fixed;
}

#content1 {
width: 500px;
height: 560px;
background: grey;
}

#footer {
width: 700px;
height: 40px;
background: red;
bottom: -20px;
position:dynamic;
}

#content2 {
width: 500px;
height: 560px;
background: green;
}

看看http://jsfiddle.net/w89Yc/4/