« 無償の高品質フォント「IPAフォント」を試してみた | TOP | ActiveXコントロールのアクティブ化が不要に »

Flashとmin-height

仕事で詰まったのでメモしておきます。
Flashを100%表示させた場合にも解像度の小さいディスプレイのためスクロールを表示させたい場合にCSSでmin-heightを使いました。

#flashcontent{
width:100%;
height:100%;
min-width:1000px;
min-height:600px;
}
こんな感じで。 ちなみにIE6にmin-heightを適用させるにはこんな感じで実装できます。 IE6でmin-width,max-widthを実装する：CSS | Tech de Go ところがこれを使うとSafariとOperaではちゃんと動かなかったのです。 画面外のFlashが描画されておらずスクロールした分が白くなっちゃう。 IE、Firefoxでは特に問題御座いません。 CSSの問題かと思っていろいろ検証してみたんですがFlash以外だと問題が無いようで、FlashPlayerとmin-heightがなんだか変な感じだと。ちなみにmin-widthは特に問題なく横へのスクロールは大丈夫。 やり方に問題は無いのでどうした物かとしばらく悩みましたが、結局はCSSでmin-heightを指定するのをやめ、JSでFlashのボックスの高さを制御するように変更してみた。

こんな感じで



function sizecontroll(){

	var flashcontent = document.getElementById("flashcontent");

   if(document.body.clientWidth < 1010){

      flashcontent.style.width = "1000px";

   }else{

      flashcontent.style.width = "100%";

   }



   if(document.body.clientHeight < 660){

      flashcontent.style.height = "650px";

   }else{

      flashcontent.style.height = "100%";

   }

}

bodyタグにonresizeとonloadにこのfunctionを設定しておきます。
こうしたところ意図どおりに動いてくれました。万事OK。モウマンタイ。

DATE | 2007,11, 5 |

Track Back

Track Back URL
http://www.techno-tokyo.com/mt/mt-tb.cgi/30

Post Comment

いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。