Iframe內100％高度的DIV會導致滾動條被切斷

我在iFrame中遇到了div的問題，並且我在本網站上查看了大約12個帖子，但無濟於事。基本上，iframe的內容有一個滾動條，Iframe將其切斷。Iframe內100％高度的DIV會導致滾動條被切斷

正如本網站上的帖子所建議的，我已經將html和body的高度設置爲某個絕對值（170px），因爲孩子們使用高度：100％，但這不起作用。我也嘗試將孩子的身高設置爲170px，但這也不起作用。似乎工作的唯一辦法是將iframe設置爲大於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>

來源

2013-04-01 Jonathan Chaplin

你爲什麼有2個'html'和'body'部分？ – Eli

因爲我正在使用iframe。所以一個html只包含iframe。另一個html，scrolling2.html是我有相關的html代碼的地方。 –

我覺得我看到你想通過你的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; 
}

來源

2013-04-01 17:13:55 Matthew

這有效！謝謝！ –

不客氣。 – Matthew

Iframe內100％高度的DIV會導致滾動條被切斷

回答

相關問題