設置iframe高度爲100％似乎溢出包含div

我有一個簡單的HTML頁面，側邊欄浮動到左側，所有內容在右側。在主要內容區域，我有一個。但是，當我使用CSS將幀的高度設置爲100％時，由於某種原因，它似乎溢出了包含div，導致我的內容之後出現少量空白。設置iframe高度爲100％似乎溢出包含div

這裏是我的HTML內容：

<div id="container"> 
    <div id="sidebar"> 
     <p>Sidebar content</p> 
    </div> 
    <div id="content"> 
     <iframe id="contentFrame"></iframe> 
    </div> 
</div>

這裏是我的CSS：

html, body { 
    height: 100%; 
} 

#container { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: 100%; 
    background-color: grey; 
} 

#sidebar { 
    width: 100px; 
    float: left; 
    background-color: blue; 
    height: 100%; 
} 

#content { 
    margin-left: 100px; 
    height: 100%; 
    background-color: yellow; 
} 

#contentFrame {  
    border: none; 
    padding: 0; 
    margin: 0; 
    background-color: pink; 
    height: 100%; 
}

（注意：有人問之前，#container { position: absolute }是必要的佈局的原因;我不能改變這種情況。）

你可以看到它在這個小提琴上「工作」：http://jsfiddle.net/9q7yp/

目標是擺脫沿着頁面底部的白色條紋（即，結果中不應該有垂直滾動條）。如果我爲#content設置overflow: hidden，那麼問題就會消失。如果有必要，我很樂意做到這一點，但我不能爲了我的生活找出爲什麼沒有這個工作就無法工作。誰能告訴我爲什麼？

來源

2012-10-04 FixMaker

嘗試添加

display:block;

到iframe。http://jsfiddle.net/9q7yp/14/

編輯：

嗯，事實證明（無論是在實踐和了解正在發生的事情）有一個更好的解決方案：

添加

vertical-align:bottom;

到iframe#contentFrame。 http://jsfiddle.net/9q7yp/17/

，作爲內嵌元件，具有vertical-align:baseline初始值，而是一個height:100%內聯元件將「推」基線幾個像素較低（因爲最初的基線是從底部幾個像素更高），

所以父母DIV認爲「好的內容會降低2個像素，我需要爲此騰出空間」。

您可以在this fiddle（請檢查您的瀏覽器控制檯並注意ClientRect對象的bottom屬性）中看到此效果。

來源

2012-10-04 11:39:20 Passerby

做得很好:-)現在，如果你能解釋發生了什麼，我會很樂意接受你的答案。 – FixMaker

@Lorax查看我更新的帖子:) – Passerby

優秀的，全面的描述。謝謝。 – FixMaker

將margin: 0添加到您的html, body {}部分。

來源

2012-10-04 10:44:24 colons

添加margin:0身體

html, body { 
    height: 100%; 
    margin:0 auto; 
}

WORKING DEMO

來源

2012-10-04 10:45:29 Champ

謝謝。雖然這很奇怪，你的演示似乎可行，但如果我將它應用到我的小提琴（http://jsfiddle.net/tRhCC/1/）它不會。任何想法爲什麼？ ...也jsbin實時預覽不工作：http://jsbin.com/uwilod/4 – FixMaker

我沒有訪問jsfiddle，因爲我的網絡管理員阻止jsfiddle的一些js文件m抱歉;）但如果你可以在任何其他網站上創建它，比如jsbin等。may b我可以試試 – Champ

你看過我包含的jsbin鏈接嗎？問題仍然存在。 – FixMaker

.................. .demo

您好現在給overflow:hidden;這個ID #content

像這樣

#content{ 
overflow:hidden; 
}

Live demo

來源

2012-10-04 10:48:22

謝謝，但你會注意到，在我提到的問題的原始文本中，我已經試過了，它的工作原理。然而，我想知道爲什麼它是必要的（即爲什麼iframe溢出div？）。 – FixMaker

設置iframe高度爲100％似乎溢出包含div

回答

相關問題