CSS: позиция: фиксированная и горизонтальная прокрутка

Question

У меня проблемы с высотой 100%.

К настоящему времени я использовал position:fixed, чтобы избежать получения пробела, если вы прокрутите страницу вниз с top:0 и bottom:0. Это отлично работает, но если вы прокручиваете горизонтально, div не прокручивается с остальной частью страницы.

Я разместил 20px слева от контейнера, и он остается в правильном положении, когда браузер не уже, чем документ, но когда это происходит, когда возникают проблемы.

EDIT: зеленый div должен вести себя как геи и двигаться, когда вы прокручиваете горизонтально, а не оставаясь на месте.

Здесь вы можете найти код:

<div style="width: 1200px; margin: 0 auto; padding-bottom:50px"> 
    <div style="background-color: #CFC; width: 340px; position:fixed; margin-left: 20px; top:0px; bottom:0px"></div> 
    <div style="background-color: #CCC; width: 340px; height: 395px; position: absolute; margin-left: 20px; top: 0px"></div> 
    <div style="box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8); margin-top: 60px"> 
    <div style="background-color: #FFF; width: 1200px; height: 260px"></div> 
    <div style="background-color: #666; width: 1200px; height: 26px"></div> 
    <div style="background-color: #FFF; width: 1200px; min-height: 500px"></div> 
    </div> 
</div> 

изображений - http://cl.ly/NuHq

jsFiddle - http://jsfiddle.net/q7tEE/

Answer 1

Вот это working jsFiddle.

Вам нужно использовать position:absolute на зеленом div вместо position:fixed, если вы хотите, чтобы он прокручивался горизонтально, как ваш серый div.

.greenbg { 
    background-color: #CFC; 
    width: 340px; 
    height:896px; 
    position:absolute; 
    margin-left: 20px; 
    top:0px; 
    bottom:0px 
}