在div問題中的高度iframe

我遇到了在div的確切高度上適合iframe的麻煩。
問題不在於不會填充完整的div，而是超出了div。

這是我現在有

CSS在div問題中的高度iframe

*{margin:0;padding:0} 
html, body {height:100%;width:100%;position: relative;} 

#header { 
    height:100px; 
    width:100%; 
    background-color:#FF0000; 
} 

#left { 
    height:inherit; 
    width: 250px; 
    float:left; 
    background-color:#0000FF; 
} 
#right { 
    margin-left:250px; 
    background-color:#FFFF00; 
    height:inherit; 
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link href="css.css" rel="stylesheet" type="text/css" /> 
<title>Untitled Document</title> 
</head> 
<body> 
<div id="header"></div> 
    <div id="left"> 
     <!--<iframe src="http://www.microsoft.com" frameborder="1"></iframe>--> 
    </div> 
    <div id="right"> 
    </div> 
</body> 
</html>

如果您查看IE（或其他瀏覽器）這個代碼，你會發現，iframe是正好100px（標題的高度）太長。我怎樣才能解決這個問題？還有任何其他意見的代碼表示讚賞。

更新！
我更改了代碼以顯示div所覆蓋的區域。如果您查看此代碼，您將看到左側（藍色）和右側（黃色）div的範圍超出了100％的屏幕區域。我希望它保持在屏幕區域（不滾動）。

來源

2010-09-14 pinkpanther

編輯：嘗試設置你的div像這樣：

<div id="splitter"> 
    <div id="header"></div> 
    <div id="left"></div> 
    <div id="right"></div> 
</div>

和CSS這樣的：

*{margin:0;padding:0} 
html, body {height:100%;width:100%;position: relative; 
} 

#splitter 
{ 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    height:100%; 
    padding-top:100px; 
    position:relative; 
} 
#header { 
    margin-top:-100px; 
    height:100px; 
    width:100%; 
    background-color:#FF0000; 
} 

#left { 
    height:inherit; 
    width: 250px; 
    float:left; 
    background-color:#0000FF; 
} 
#right { 
    margin-left:250px; 
    background-color:#FFFF00; 
    height:inherit; 
}

這得到它在IE8和Firefox瀏覽器，但瀏覽器不似乎支持框大小，並ie7爆炸。

來源

2010-09-15 02:14:56 david

嗨，感謝您的回覆。確實不需要將iframe放置在表格標籤中。不幸的是把位置：在#right中的親戚沒有解決問題 – pinkpanther 2010-09-15 18:11:41

看來你想要做的是獲得框模型擁有。 CSS3增加了框大小選項，它修復了它，但似乎只有ie8支持它（o_O） – david 2010-09-15 23:36:24

謝謝大衛的幫助。我在#splitter的代碼中添加了以下代碼行：「-webkit-box-sizing：border-box;」這將使它在Chrome和Opera中工作，但不在IE7中。我正在研究使用javascript來確定heigth的可能性。然後我會看到哪個對我最好。 – pinkpanther 2010-09-19 11:42:47

您可以更新您的樣式併爲iframe添加樣式。

#frame_box 
{ 
    height:98%; 
    width: 250px; 
}

更新框架代碼：

<iframe id="frame_box" src="http://www.microsoft.com" frameborder="1"></iframe>

這裏是你的代碼的jsfiddle：Updated code。

來源

2013-09-13 05:36:06 Avdhut

在div問題中的高度iframe

回答

相關問題