html 滑条无效,html – 滚动条可见,无法滚动

我有以下

HTML(这里演示：

http://jsfiddle.net/49Phn/),其内部DIV的标签ID为：

Section 1

Section 2

Section 3

Section 4

以下CSS(对不起,这么久)：

/* 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;

}

我的内容容器包含四个框,如果缩小窗口高度,您将看到它们被隐藏,这是所需的行为.

但是,我需要这个容器div来滚动 – 它显示滚动条(在Windows上) – 它看起来围绕正确的高度,但实际上并不滚动.任何的想法？

它被绑定到屏幕边缘的原因是因为它是一个设计用于在多种屏幕尺寸上运行的移动应用程序.