Question

我的问题是关于2个div都有85％的高度和100％的宽度，但一次只显示一个。因为它现在是第二个div显示奇怪。

看看这里并选择（menuslider-＆gt;在签证下选择“graf”。）在那里你会看到第二个div没有宽度100％和85％的高度，我能以一种简单的方式解决这个问题吗？

这是HTML：

<div id="mainContent">
<div id="googleMap"></div>
<div id="GraphWindow">dw
<iframe src="prototype.html" frameborder="" name="" width="" height="" scrolling="no"> Sorry your browser does not support frames or is currently not set to accept them.</iframe>
</div>
</div>

这是CSS：

html {height:100%}
body {height:100%;margin:0;padding:0}

#mainContent{
height:85%;
width:100%;
  margin-left: auto ;
  margin-right: auto ;
}

#graphWindow{
height:85%;
width:100%;
  margin-left: auto ;
  margin-right: auto ;
}
#googleMap {
height:85%;
width:100%;
  margin-left: auto ;
  margin-right: auto ;

}

以下是显示或隐藏图表的JavaScript：

function selectMainView(){
    if(document.details.title.value == "map"){  
        document.getElementById("googleMap").style.display = "block";
        document.getElementById("GraphWindow").style.display = "none";
    }
    else{
        document.getElementById("googleMap").style.display = "none";
        document.getElementById("GraphWindow").style.display = "block";
    }
}

Answer 1

将高度和宽度属性设置为iframe

<iframe src="prototype.html" frameborder="" name="" width="100%" height="85%" scrolling="no"> Sorry your browser does not support frames or is currently not set to accept them.</iframe>

Answer 2

您的div标识为GraphWindow（大写字母G），您的css选择器为#graphWindow（小写字母g）。

更改其中一个以使它们匹配套管。

此外，您应该将iframe更改为width和height 100％

Answer 3

将#GraphWindow设置为#graphWindow ...也许，拼写错误？！仔细检查你的CSS，它区分大小写！

（提示：尝试使用“firebug”，下次检查并调试它！）

Answer 4

像这样修改你的CSS：

html {height:100%}
body {height:100%;margin:0;padding:0}

#mainContent{
height:85%;
width:100%;
  margin-left: auto ;
  margin-right: auto ;
}

#GraphWindow{
height:85%;
width:100%;
  margin-left: auto ;
  margin-right: auto ;
}

#GraphWindow iframe{
height:100%;
width:100%;
}

#googleMap {
height:85%;
width:100%;
  margin-left: auto ;
  margin-right: auto ;
}

多个div如何拥有85％的高度和100％的宽度？

4 个答案: