Within a scrollable div, I have two nested divs. The first has a fixed size to hold header data, while the second adjusts to the page containing content corresponding to the headers.
The outer div scrolls horizontally along with the headers, while the inner div allows vertical scrolling for long lists of data.
The problem arises when the scrollbar for the inner data is not visible until the page is scrolled all the way to the right.
Here's the HTML structure:
<div id="outerContainer">
<div id="xScroll">
<div id="Header">Fixed height header
</div>
<div id="yScroll">Container adjusting to page
<div id="whitespace">Content with y-scrolling</div>
<br/>
</div>
</div>
CSS styling:
#yScroll {
background: green;
position: absolute;
overflow-x: hidden;
overflow-y: auto;
width: 1200px;
top: 90px;
bottom: 150px;
}
#whitespace {
background: white;
height: 500px;
}
#Header {
background: red;
height: 90px;
width: 1200px;
}
#xScroll {
position: relative;
height: 500px;
width: 100%;
overflow-x: auto;
overflow-y: hidden;
}
#outerContainer {
background: gray;
}
#long {
width: 1200px;
}
A demonstration of the issue can be viewed here: http://jsfiddle.net/f7sc4/