Scrollbars visible, can't scroll

I have the following HTML (demo here: http://jsfiddle.net/49Phn/) which has an inner DIV with an ID of `tabs`: ``` <div data-role="page"> <div id="header"></div> <div id="content"> <div id="tabs"> <div id="j1"> <div class="letter"> <p>Section 1</p> </div> </div> <div id="j2"> <div class="letter"> <p>Section 2</p> </div> </div> <div id="j3"> <div class="letter"> <p>Section 3</p> </div> </div> <div id="j4"> <div class="letter"> <p>Section 4</p> </div> </div> </div> </div> <div id="popup-container"> <div id="popup"> <div id="pheader"> <a id="close-popup"></a> </div> </div> </div> </div> ``` And the following CSS (sorry it's so long): ``` /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ @font-face { font-family: PhinsterFine; src: url('../fonts/PhinsterFine.ttf'); } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; text-shadow: none; color: black; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } .hub ui-page, .hub .ui-body-c, .ui-overlay-c ui-page, .ui-overlay-c .ui-body-c, .ui-mobile-viewport ui-page, .ui-overlay-c .ui-body-c { z-index: -2 !important; } /*----------------------------------- Crimson Tide - non-jQuery styles ------------------------------------*/ .hub #content { z-index: -1; } .hub #header, .hub #content, .hub #popup-container { font-size: 1.3em; /* font-variant : small-caps; */ position: absolute; } .hub #header { position: absolute; width: 100%; height: 40px; top: 0; background: #eee no-repeat 50% / 130px; } .hub #content { top: 40px; padding-top: 30px; bottom: 45px; overflow: auto; background: #fff; width: 100%; } .hub #popup-container { opacity: .95; display: none; top: 0; bottom: 0; left: 0; right: 0; } .hub #popup-container #popup { position: absolute; background: #fff; top: 30px; bottom: 30px; left: 10px; right: 10px; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } .hub #popup-container #popup #header { position: inherit; width: 100%; height: 60px; background: #eeeeee; /* Old browsers */ background: -moz-linear-gradient(top, #eeeeee 0%, #333333 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#333333)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #eeeeee 0%,#333333 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #eeeeee 0%,#333333 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #eeeeee 0%,#333333 100%); /* IE10+ */ background: linear-gradient(to bottom, #eeeeee 0%,#333333 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#333333',GradientType=0 ); /* IE6-9 */ -webkit-border-top-left-radius: 7px; -webkit-border-top-right-radius: 7px; -moz-border-radius-topleft: 7px; -moz-border-radius-topright: 7px; border-top-left-radius: 7px; border-top-right-radius: 7px; } .hub #content #tabs { height: 100%; min-height: 400px; background: #f00; text-align: center; } .hub #content #tabs > div { padding: 5px 20px 40px 20px; float: left; height: 50%; width: 50%; box-sizing: border-box; } .hub #content #tabs :active > div { background: #fff; } .letter { background: #fff; box-shadow: 0 0 80px #A0A0A0; margin: 16px auto 0; padding: 10px; position: relative; width: 80%; max-width: 250px; height: 70%; } .letter:before, .letter:after { content: ""; height: 98%; position: absolute; width: 100%; z-index: -1; } .letter:before { background: #baffc4; box-shadow: 0 0 8px rgba(0, 0, 0, .5); left: -5px; top: 4px; -webkit-transform: rotate(-1.5deg); -moz-transform: rotate(-1.5deg); -ms-transform: rotate(-1.5deg); -o-transform: rotate(-1.5deg); transform: rotate(-1.5deg); } .letter:after { background: #80FF93; box-shadow: 0 0 3px rgba(0, 0, 0, .2); right: -3px; top: 1px; -webkit-transform: rotate(1.4deg); -moz-transform: rotate(1.4deg); -ms-transform: rotate(1.4deg); -o-transform: rotate(1.4deg); transform: rotate(1.4deg); } .count { font-family: helvetica, san-serif; font-size: .7em; text-align: center; vertical-align: middle; line-height: 30px; position: absolute; left: 60%; top: 30%; background: #baffc4; border-radius: 50%; width: 30px; height: 30px; -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25); -moz-box-shadow: 0 3px 8px rgba(0, 0, 0, .25); box-shadow: 0 3px 8px rgba(0, 0, 0, .25); } .hub #content #tabs div h2 { text-align: center; bottom: 0; padding: 0 0 10px 0; } ``` My content container contains four boxes, which, if you shrink the window height - you'll see they're hidden which is the desired behaviour. However, I need this container div to scroll - and it shows the scroll bar (on Windows) - which looks round about the correct height, but isn't actually scrolling. Any idea? The reason it's bound to the screen edges is because it's a mobile app designed to run on multiple screen sizes.