Databases
StackOverflow2013
Postsdbo
POWidth issues with complex scrolling behaviour in a Div
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWidth issues with complex scrolling behaviour in a Div
    text
    copied!<p>We need to display data in a scrollable div. </p> <p>We have created a simplified fiddle to demonstrate: <a href="http://jsfiddle.net/ZsQ5J/3/" rel="nofollow">http://jsfiddle.net/ZsQ5J/3/</a></p> <p>The div contains two parts, a header and the content.</p> <p>We want the Header to scroll horizontally along with the content, but to be fixed while vertical scrolling through the content.</p> <p>We would like to achieve this completely in CSS if possible, we could solve it with jQuery I guess, but would prefer not to have to.</p> <p>We have got most of the way there in CSS, but <strong>we can't get the content div to stretch the full width of the header.</strong> Because, I guess, making the content div 100% of the containing div isn't the full width of the header.</p> <p>In a little more depth:</p> <p>HEADER:</p> <p>We want the header to stay visible all the time when scrolling up/down through the content. However the header is wider than the containing div so we do want it to scroll horizontally. (So no vertical scroll on the header, just horizontal). We have got this part working. The header is a table.</p> <p>CONTENT:</p> <p>The content is a div that we want to scroll both horizontally (in sync with the header) and vertically (independently of the header). This is the part we are having problems with. The scroll is working well, but the width is not expanding to match the header. It will only go as wide as the containing div.</p> <p><em>I know it's weird to have a table as the header and a div as the content, but due to legacy issues we need to keep it this way.</em></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload