Css Iframe内高度为100%的DIV会导致滚动条被切断_Css_Html_Scrollbar

Css Iframe内高度为100%的DIV会导致滚动条被切断

css html

Css Iframe内高度为100%的DIV会导致滚动条被切断,css,html,scrollbar,Css,Html,Scrollbar,我在iFrame中遇到了一个div的问题，我在这个站点上查看了十几篇帖子，但都没有结果。基本上，iframe的内容有一个滚动条，iframe会将其切断根据本站帖子的建议，我已经将html和body的高度设置为一些绝对值（170px），因为孩子们使用高度：100%，但这不起作用。我还尝试将孩子的身高设置为170px，但这也不起作用。唯一有效的方法是将iframe设置为某个大于230 px的数字。但是，我更希望iframe的高度保持在170px 一般来说，我正在寻找一种方法，在iframe中有两个

我在iFrame中遇到了一个div的问题，我在这个站点上查看了十几篇帖子，但都没有结果。基本上，iframe的内容有一个滚动条，iframe会将其切断

根据本站帖子的建议，我已经将html和body的高度设置为一些绝对值（170px），因为孩子们使用高度：100%，但这不起作用。我还尝试将孩子的身高设置为170px，但这也不起作用。唯一有效的方法是将iframe设置为某个大于230 px的数字。但是，我更希望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>


无标题文件
无标题文件
html，正文{
位置：绝对位置；
排名：0；
左：0；
边界：0；
保证金：0；
填充：0；
身高：继承；
最小高度：继承；
}
.家长组{
身高：100%；
最小高度：100%；
填充：0px；
边际：0px；
边框：0px
}
.包装师{
保证金：0；
填充：0px 0px 0px 3px；
宽度：100%；
身高：100%；
最小高度：100%；
}
.wrapper#title_表.titleHeader_行th.coltitle_单元格{
边框：1px实心#a7cbe3；
左边界：无；
字体：粗体11px；
最小高度：35px；
保证金：0；
填充：0；
位置：相对位置；
}
.纪录科{
边际：0px；
宽度：100%；
高度：100%；/*需要此值来占用标题表未占用的剩余高度*/
溢出：自动；
}
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123

我想我通过CSS评论看到了你想做什么的问题：

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

尝试使用以下样式将标题表包装到div中：

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

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

我想我通过CSS评论看到了你想要做什么的问题：

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

尝试使用以下样式将标题表包装到div中：

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

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

为什么有2个

html

和

body

部分？因为我使用的是iframe。因此，一个html仅包含iframe。另一个html，scrolling2.html，是我拥有相关html代码的地方。为什么你有2

html

和

body

部分？因为我使用的是iframe。因此，一个html仅包含iframe。另一个html，scrolling2.html，是我拥有相关html代码的地方。

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