Изменение вертикального положения 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 DEMO: http://jsfiddle.net/jiriranc/w89Yc/3/

Вы видите? Если размер разрешения большой, а нижние - перекрываются. Но если разрешение меньше, 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/