我在 iFrame 中的 div 有问题,我查看了这个网站上的十几个帖子都无济于事。基本上,iframe 的内容有一个滚动条,而 iframe 将其切断。
正如本网站上的帖子所建议的那样,我已将 html 和 body 的高度设置为某个绝对值(170 像素),因为孩子们使用 height:100%,但这不起作用。我也尝试将孩子的高度设置为 170px,但这也不起作用。唯一可行的是将 iframe 设置为某个数字 > 230 像素。但是,我希望 iframe 高度保持在 170 像素。
一般来说,我正在寻找一种方法来拥有两个视口,一个不滚动的标题部分和一个在 iframe 内滚动的内容部分。内容应显示 1 个垂直滚动条以滚动内容部分。
我的代码包含在下面,我正在使用 iframe。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<iframe src="/html/scrolling2.html" scrolling="no" style="height:170px"/>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
html, body {
position:absolute;
top:0;
left:0;
border:0;
margin:0;
padding:0;
height:inherit;
min-height:inherit;
}
.parent_div {
height:100%;
min-height:100%;
padding:0px;
margin:0px;
border:0px
}
.wrapper_div {
margin: 0;
padding:0px 0px 0px 3px;
width:100%;
height:100%;
min-height:100%;
}
.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;
}
.record_div {
margin:0px;
width:100%;
height:100%; /*need this to take up remaining height not occupied by title_table*/
overflow:auto;
}
</style>
</head>
<body>
<div class="parent_div" id="listing">
<DIV class="wrapper_div" >
<TABLE id="title_table" >
<TR >
<TH class="coltitle_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 ></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 ></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 ></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 ></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>
</html>