1

私の質問は、高さ 85% と幅 100% の 2 つの div があるが、一度に 1 つしか表示されないということです。現在、2番目のdivが奇妙に表示されています。

ここを見て (menuslider->「graf」を選択してください。) 2 番目の 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";
    }
}
4

4 に答える 4

0

次のように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 ;
}
于 2012-12-16T06:06:02.990 に答える
0

高さと幅の属性を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>
于 2012-12-15T18:08:48.140 に答える
0

あなたのdivhasid GraphWindow（大文字のG）とあなたのcssセレクターは#graphWindow（小文字のg）です。

それらの1つを変更して、ケーシングと一致させます。

また、100％のに変更する必要がiframeありwidthますheight

于 2012-12-15T18:10:36.267 に答える
0

#GraphWindowに設定#graphWindow...おそらく、スペルミス?! CSS を注意深く確認してください。大文字と小文字が区別されます。

(ヒント: 「firebug」を使ってみて、次回は調べてデバッグしてください!)

于 2012-12-15T18:15:46.007 に答える