[英]DIV with 100% height is cutting off scrollbar
I've looked on this forum for divs with 100% height problems and can't seem to find the exact problem I'm having. 我在这个论坛上查找了100%身高问题的div,但似乎找不到我遇到的确切问题。 Basically I have a div with 100% height and part of the scrollbar is cut off.
基本上我有一个高度为100%的div,并且滚动条的一部分被切除了。 How do I fix this?
我该如何解决? I've enclosed sample code below.
我在下面附上了示例代码。
HTML: 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: 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;
}
remove overflow:hidden
from the .wrapper
selector 删除
overflow:hidden
从.wrapper
选择器中overflow:hidden
See this Jsfiddle for working example. 有关工作示例,请参见此Jsfiddle 。
I think your problem is that you're missing a tag near the end. 我认为您的问题是您在结尾处缺少标签。
Edit: Wow just saw the age of this question... haha 编辑:哇刚刚看到这个问题的年龄...哈哈
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.