1

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>
4

1 に答える 1

1

I think I see the problem in what you want to do by your CSS comment:

   /*need this to take up remaining height not occupied by title_table*/

The problem is that browsers don't really understand the concept of remaining space. Instead, you have to tell it how much space is available and/or how much to use.

Try wrapping your title table in a div with this style:

#title_wrapper {
    height:20%;
    overflow:hidden;
}

And then use this style on your second section to take up the "remaining" space:

.record_div {
  height:80%;
  overflow:auto;
}
于 2013-04-01T17:13:55.800 に答える