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

【问题标题】：DIV with 100% height within Iframe causes scrollbar to be cut offIframe 内高度为 100% 的 DIV 导致滚动条被切断
【发布时间】：2013-04-02 07:20:54
【问题描述】：

我在使用 iFrame 中的 div 时遇到了问题，我查看了该网站上的十几个帖子，但均无济于事。基本上，iframe 的内容有一个滚动条，而 iframe 将其切断。

根据本网站帖子的建议，我已将 html 和 body 的高度设置为某个绝对值（170 像素），因为孩子们使用 height:100%，但这不起作用。我还尝试将孩子的高度设置为 170 像素，但这也不起作用。似乎唯一可行的是将 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>

【问题讨论】：

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

标签： css html scrollbar

【解决方案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;
}

【讨论】：