I am using a left side bar for my menu and It needs to scroll.

I am using a left side bar for my menu and It needs to scroll.

I have an ipod Touch and an iPhone. I am using a left side bar for my menu. this works fine in the vertical position. But as I observer, I see that the ipod touch (sidebar menu) moves up & down with the content on the right if the page is long. For the iPhone the (sidebar menu) does not move at all it is stationary (while the right content page scrolls). This is fine for both device in the vertical position. But when I turn the device in the horizontal position the (sidebar menu) is not completely shown for the iPhone because of the height. The Touch phone is ok because the menu scrolls up & down with the right side.

How can I get the left (sidebar menu) to scroll on the iPhone with the content on the right as it scrolls. And why is their a difference between the two devices.

@media screen and (orientation:portrait){
.sidebar{
display:inline-block!important;
}
.main-wrapper{
padding-left:60px;
width:78%!important;
}
}

@media screen and (orientation:landscape){
.sidebar{
/*display:none!important;*/
    display:inline-block!important;
}
.main-wrapper{
padding-left:60px;
width:84%!important;
}
}