javascript - 多个 div 如何具有 85% 的高度和 100% 的宽度？

Question

我的问题是关于有 2 个 85% 高度和 100% 宽度的 div，但一次只显示一个。现在，第二个 div 显示异常。

在这里查看并选择(menuslider->在 visa 下选择“graf”。) 在那里你会看到第二个 div 的宽度不是 100%，高度不是 85%，我可以用简单的方法解决这个问题吗？

Here is the website

这是 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>