Question

我在iFrame中遇到div问题，而且我在这个网站上看过十几个帖子都无济于事。基本上，iframe的内容有一个滚动条，Iframe会将其剪掉。

根据本网站帖子的建议，我已将html和body的高度设置为某个绝对值（170px），因为孩子们使用高度：100％，但这不起作用。我也尝试将孩子的身高设置为170px，这也不起作用。似乎唯一有用的是将iframe设置为某个数字＆gt; 230像素但是，我更喜欢iframe高度保持在170px。

一般来说，我正在寻找一种方法来拥有两个视口，一个不滚动的标题部分和一个在iframe中滚动的内容部分。应使用1个垂直滚动条显示内容以滚动内容部分。

我的代码包含在下面，我正在使用我的代码。

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

Answer 1

我想我在你的CSS评论中看到了你想要做的问题：

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

问题是浏览器并不真正理解剩余空间的概念。相反，你必须告诉它有多少空间可用和/或使用多少。

尝试使用此样式将标题表包装在div中：

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

然后在第二部分使用此样式来占用“剩余”空间：

.record_div {
  height:80%;
  overflow:auto;
}

Iframe中100％高度的DIV导致滚动条被切断

1 个答案: