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

Question

My question is regarding having 2 divs both having 85% height and 100% width, but only displaying one at a time. As it is now the second div is displaying strangely.

Have a look here and choose (menuslider->choose "graf" under visa.) There you will see that the second div is not having the width 100% and 85% height, can I solve this in an easy way?

Here is the website

Here is the 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>

Here is the 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 ;

}

Here is the javascript showing or hiding the graph:

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

Your div has id GraphWindow (uppercase G) and your css selector is #graphWindow (lowercase g).

Change one of them to have them match casing.

Also you should change the iframe to have width and height of 100%

Answer 3

Set #GraphWindow to #graphWindow ... perhaps, spell error?! Check your CSS carefully, it's case sensitive!

(Tip: Try using "firebug", inspect and debug it next time!)

Answer 4

Modify your CSS like this:

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