Iframe中高度為100％的DIV導致滾動條被切斷

Question

我在iFrame中使用div時遇到問題，而且我看過該網站上的十幾個帖子都無濟於事。 基本上，iframe的內容具有滾動條，而iframe會將其截斷。

正如該站點上的帖子所建議的，我已將html和body的高度設置為某個絕對值（170px），因為子級使用height：100％，但這不起作用。 我也嘗試過將孩子的身高設置為170px，但這也不起作用。 似乎唯一可行的方法是將iframe設置為大於230像素的數字。 但是，我希望iframe的高度保持在170px。

通常，我正在尋找一種具有兩個視口，一個不滾動的標題部分和一個在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>

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 個解決方案

解決方案1
1 已采納 2013-04-01 17:13:55

Iframe中高度為100％的DIV導致滾動條被切斷

問題描述

1 個解決方案

解決方案1 1 已采納 2013-04-01 17:13:55

解決方案1
1 已采納 2013-04-01 17:13:55