在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

回答

相关问题