DIV with 100% height is cutting off scrollbar

CheereCligh

New Member
I've looked on this forum for divs with 100% height problems and can't seem to find the exact problem I'm having. Basically I have a div with 100% height and part of the scrollbar is cut off. How do I fix this? I've enclosed sample code below.HTML:\[code\]<body style="height:150px;"> <div style="height:150px;padding:0px;margin:0px;border:0px" > <DIV class="wrapper"> <TABLE id="title_table" > <TR class="titleHeader_row" oncontextmenu="return false;"> <TH class="coltitleExpand_cell">123 </TH> <TH class="coltitle_cell">123<br/>123 </TH> <TH class="coltitle_cell">123<br/>123<br/>123 </TH> <TH class="coltitle_cell">123<br/>123<br/>123 </TH> <TH class="coltitle_cell">123<br/>123 </TH> <TH class="coltitle_cell">123<br/>123 </TH> <TH class="coltitle_cell">123<br/>123 </TH> <TH class="coltitle_cell">123<br/>123 </TH> <TH class="coltitle_cell">123<br/>123 </TH> </TR> </TABLE> <DIV class="record_div" id="coldata_div"> <TABLE class="record_table" id="coldata_table"> <TR> <TD class="dummy_cell"></TD> <TH >123 </TH> <TH >123<br/>123 </TH> <TH >123<br/>123<br/>123 </TH> <TH >123<br/>123<br/>123 </TH> <TH >123<br/>123 </TH> <TH >123<br/>123 </TH> <TH >123<br/>123 </TH> <TH >123<br/>123 </TH> </TR> <TR> <TD class="dummy_cell"></TD> <TH >123 </TH> <TH >123<br/>123 </TH> <TH >123<br/>123<br/>123 </TH> <TH >123<br/>123<br/>123 </TH> <TH >123<br/>123 </TH> <TH >123<br/>123 </TH> <TH >123<br/>123 </TH> <TH >123<br/>123 </TH> </TR> <TR> <TD class="dummy_cell"></TD> <TH >123 </TH> <TH >123<br/>123 </TH> <TH >123<br/>123<br/>123 </TH> <TH >123<br/>123<br/>123 </TH> <TH >123<br/>123 </TH> <TH >123<br/>123 </TH> <TH >123<br/>123 </TH> <TH >123<br/>123 </TH> </TR> </TABLE> </div> </DIV></body>\[/code\]CSS:\[code\].wrapper { margin: 0; padding:0px 0px 0px 3px; width:100%; height:150px; overflow:hidden;}.dummy_cell { width: 45px;}.wrapper table { border-collapse: collapse; margin: 0; padding: 0; table-layout: fixed;}.wrapper #title_table { position: relative;}.wrapper th { font: normal;}.wrapper #title_table .titleHeader_row { background-color: #E7F0F7; font: 11px bold Arial, Helvetica, sans-serif; margin: 0; padding: 0;}.wrapper #title_table .titleHeader_row th.coltitle_cell { border: 1px solid #a7cbe3; border-left: none; font: bold 11px; min-height: 35px; margin: 0; padding: 0; position: relative;}.wrapper #title_table .titleHeader_row .coltitleExpand_cell { border: 1px solid #a7cbe3; margin: 0; text-align: left; width: 45px;}.wrapper #title_table { position: relative;}.wrapper th { font: normal;}.wrapper #title_table .titleHeader_row { background-color: #E7F0F7; font: 11px bold Arial, Helvetica, sans-serif; margin: 0; padding: 0;}.wrapper #title_table .titleHeader_row th.coltitle_cell { border: 1px solid #a7cbe3; border-left: none; font: bold 11px; min-height: 35px; margin: 0; padding: 0; position: relative;}.wrapper .results_row { display: inline;}.record_div { margin:0px; width:100%; height:100%; overflow:auto;}.wrapper .record_div .record_table { table-layout:fixed; margin: 0;}\[/code\]
 
Back
Top