Question

我遇到麻烦在if的确切高度拟合iframe 问题不在于它不会填满整个div，而是超出了div。

这就是我现在所具有的内容 CSS

*{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（标题的高度）太长。我怎样才能解决这个问题？此外，对代码的任何其他评论表示赞赏。

UPDATE !!
我更改了代码以显示div所覆盖的区域。如果您查看此代码，您将看到左（蓝色）和右（黄色）div超出100％屏幕区域。我希望它留在屏幕区域（不滚动）。

Answer 1

编辑：尝试设置这样的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中运行，但chrome似乎不支持box-sizing，而且ie7爆炸。

Answer 2

您可以更新自己的样式并为iframe添加样式。

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

将帧代码更新为：

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

以下是代码的jsfiddle：Updated code。

div问题中的高度iframe

2 个答案: