多個div如何具有85％的高度和100％的寬度？

Question

我的問題是讓2個div的高度和寬度分別為85％和100％，但一次只能顯示一個。 現在，第二個div顯示異常。

看看這里並選擇（簽證下的menuslider-> choose“ 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 ID為GraphWindow （大寫G），而CSS選擇器為#graphWindow （小寫g）。

更改其中之一以使它們與外殼匹配。

另外，您應該將iframe更改為width和height為100％

Answer 3

將#GraphWindow設置為#graphWindow ...也許拼寫錯誤？！ 仔細檢查CSS，區分大小寫！

（提示：嘗試使用“螢火蟲”，下次進行檢查和調試！）

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 ;
}