DIV with 100% height is cutting off scrollbar
Question
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:
<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>
CSS:
.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;
}
2 answers
solution1
2 ACCPTED 2013-03-27 19:03:25
remove overflow:hidden from the .wrapper selector
See this Jsfiddle for working example.
solution2
0 2014-04-29 05:34:31
I think your problem is that you're missing a tag near the end.
Edit: Wow just saw the age of this question... haha
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
100% height div cutting off div inside
DIV with 100% height within Iframe causes scrollbar to be cut off
scrollbar on inner div with height 100%
100% Div height without scrollbar
Background colour cutting off in automatic height div
Overflow scrollbar not showing on 100% height div in Firefox
setting div to height: 100% makes scrollbar disabled
Firefox 100% height div - scrollbar showing up
Setting height 100% to div causes vertical scrollbar
height 100% custom scrollbar
Related Tags