iFrame 内の div に問題があり、このサイトの約 10 の投稿を見ましたが役に立ちませんでした。基本的にiframeのコンテンツにはスクロールバーがあり、iframeはそれを切り取ります。
このサイトの投稿で推奨されているように、子供が高さ:100% を使用するため、html と本文の高さを絶対値 (170px) に設定しましたが、これは機能しません。また、子の高さを 170px に設定しようとしましたが、これもうまくいきませんでした。機能しているように見える唯一のことは、iframe を 230 px より大きい数値に設定することです。ただし、iframe の高さは 170px のままにしたいと思います。
一般に、スクロールしないタイトル セクションと iframe 内でスクロールするコンテンツ セクションの 2 つのビューポートを持つ方法を探しています。コンテンツ セクションをスクロールするには、コンテンツを 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>