1
我已經看過這個論壇上有100%身高的問題的divs,並且似乎無法找到我遇到的確切問題。基本上我有一個百分之百的高度和部分滾動條被切斷。我該如何解決?我已經在下面附上示例代碼。DIV與100%身高正在切斷滾動條
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;
}
好的。這適用於這個例子。但是,我的問題有點複雜。提供的代碼實際上是一個iframe中的html文件。