.css page cut off footer, wont scroll

Question

Всякий раз, когда я добавляю приличное количество контента на страницу, он не прокручивается, а нижний колонтитул отключается. Я пробовал решения по другим вопросам, но пока ничего не работало. Какие-либо предложения?

html { 
    overflow: hidden; 
    height: 99%; 
} 

body { 
    background: #ffffff; 
    height: 99%; 
    margin: 0; 
    padding: 0; 
    line-height: 150%; 
    text-align: center; 
} 

* { 
    font-size: 8pt; 
    font-family: Tahoma, Verdana, sans-serif; 
    color: #000000; 
    text-align: left; 
} 

/* === Containers === */ 

#mainContentArea { 
    margin: 0 auto 0 auto; 
    display: table; 
    height: 100%; 
    position: relative; 
    overflow: hidden; 
    width: 600px; 
} 

.link,.linkActive { 
    width:75px; 
    margin-right:10px; 
    float: left; 
    margin-top:24px; 
    text-align:center; 
    font-family:Georgia, "Times New Roman", Times, serif; 
    background-image:url(tab.gif); 
    position:relative; bottom:0px; 
} 

.link:hover { background-image:url(tab2.gif); } 

a { text-decoration:none; } 

.link a { 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:12px; 
    font-weight:bold; 
} 

#linkGroup { 
    margin-right:10px; 
    height:40px; 
    width:600px; 
} 

#title { 
    width:230px; 
    height:40px; 
    margin-right:20px; 
    margin-top:15px; 
    font-family:Verdana, Arial, Helvetica, sans-serif; 
    font-size:20px; 
    font-weight:bold; 
    text-align:center; 
    float:left; 
} 

.contentTitle { 
    font-family:Verdana, Arial, Helvetica, sans-serif; 
    color:#213E74; 
    font-size:19px; 
    margin-left:15px; 
    margin-right:12px; 
    margin-bottom:12px; 
    width:573px; 
} 

.pageContent { 
    font-family: Arial, Helvetica, sans-serif; 
    color:#000000; 
    font-size:12px; 
    margin-left:20px; 
    margin-right:20px; 
    width:560px; 
} 


#blueBox { 
    position: absolute; 
    vertical-align: middle; 
    background-color:#E7EDF8; 
    width:600px; 
    clear:both; 
} 

#header { 
    width:600px; 
    height:20px; 
    background-color:#FFFFFF; 
    background-image:url(header.gif); 
    background-repeat:no-repeat; 
} 

#footer { 
    width:600px; 
    height:20px; 
    background-color:#FFFFFF; 
    background-image:url(footer.gif); 
    background-repeat:no-repeat; 
    text-align:center; 
    padding-right:10px; 
    color:#BDCDEC; 
} 

#footer a { 
    font-size:9px; 
    color:#BDCDEC; 
} 

#contentBox { margin-top:25px; } 

html, body { text-align: center; } 

p {text-align: left;} 

Answer 1

Посмотреть это:

#mainContentArea { 
    margin: 0 auto 0 auto; 
    display: table; 
    height: 100%;   # set the height to the same as the parent element 
    position: relative; 
    overflow: hidden;  # hide (prevent scrolling) content that overflows 
    width: 600px; 
} 

Удаление overflow директиву, или установить его в auto должны решить эту проблему.

Answer 2

Слишком переполнение скрывает полосу прокрутки от вашего html.

Вы пытались удалить строку

html { 
    overflow:hidden;