- 締切済み
floatしたdivの高さを画面いっぱいにした際の質問です。
下記のTIPSを利用してfloatさせたdivを画面いっぱいの高さに表示したいのですが、 FireFoxだとうまく表示されますが、IEだとものすごく縦長のページとして認識されてしまいます。 (div#catsideが長く表示されてしまうようです） IEでもうまく表示させるにはどうすればいいでしょうか。 もしこのTIPSではなく別のTIPSで同じ表示が可能でしたらそちらを教えていただければ幸いです。 よろしくお願いいたします。 ※デザイン上添付の画像のようにレイヤー化する必要があるため、z-indexは必須です。ここが邪魔しているのかなとも思うのですが・・・ ＜HTML＞ <div id="catwrapper" class="cl"> <div id="catsidemenu" class="cl"> <div id="catSidePhotoBg"> <div id="catSidePhoto"> <span>サイドバー写真</span> </div> </div> <ul> <li><a href="menu01">menu01</a></li> <li><a href="menu02">menu02</a></li> <li><a href="menu03">menu03</a></li> <li><a href="menu04">menu04</a></li> <li><a href="menu05">menu05</a></li> </ul> </div> <div id="catbody"> 略 </div> </div> ＜CSS＞ div#catwrapper{ background:#e6e6e4; overflow: hidden !important; overflow: visible; min-height: 100%; height: auto !important; height: 100%; width:1004px; z-index:-100; } div#catwrapper div#catSidePhotoBg , div#catwrapper div#catsidemenu{ float:left; padding-bottom: 32767px !important; margin-bottom: -32767px !important; padding-bottom: 0; margin-bottom: 0; overflow:hidden; height: 100%; } div#catsidemenu{ height: 100%; width: 400px; } div#catsidemenu div#catSidePhoto{ display:block; width:217px; height:800px; overflow:hidden; } div#catsidemenu ul , div#catsidemenu ul li{ 略 } div#catSidePhotoBg{ background:url(images/sidebarbg.png) repeat-y; width:257px; display:block; position:relative; z-index:150; overflow:hidden; } div#catbody{ width:auto; padding:90px 0 0; margin:0 0 0 420px; height:100%; text-align:left; } .cl { display: inline-block; } .cl:after { content: ""; display: block; clear: both; }
- みんなの回答 （2）
- 専門家の回答
みんなの回答
いいえ、dreamweaverとfirefox IE6で確認しましたが、画像とは程遠いものでした。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> でやりましたが、手に負えません。。
報告します： 提示された画像と、コーディングによる表示結果の関連性がわからず、手がつけられませんでした。
お礼
報告ありがとうございます！ すごく急いでいるのでとてもありがたいです。 コーディング上は添付画像と同じような結果が得られたということでしょうか？ 内容を書いてある部分などはごっそり省いてあるのですが、ダミーでも入れたほうがいいのでしょうか？ 画像に関しては、z-indexの関係上このようにレイヤー表示するため、 position:rerative;およびz-indexが必須であるという参考で出しました。 表示させたい結果はcatsidemenu(およびその中いっぱいに表示されるcatsidePhotoBg）、catbodyが 画面いっぱいの高さに表示される状態です。
お礼
親要素(この場合catwrapper)にもpositionを設定することで回避出来ました！ ありがとうございました。
補足
画像のような背景色などは指定していませんでしたので、再添付いたします。 よろしくお願いいたします。 クリアCSSは添付していませんが、YUIベースのものを使用しています。 因みに、FireFoxでは問題がなく、IE7のみ表示がおかしくなるようです。 **** html **** <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> </head> <body> <div id="catwrapper" class="cl"> <div id="catsidemenu" class="cl"> <div id="catSidePhotoBg"> <div id="catSidePhoto"> <span>サイドバー写真</span> </div> </div> <ul> <li><a href="menu01">menu01</a></li> <li><a href="menu02">menu02</a></li> <li><a href="menu03">menu03</a></li> <li><a href="menu04">menu04</a></li> <li><a href="menu05">menu05</a></li> </ul> </div> <div id="catbody"> 略 </div> </div> </body> </html> **** style.css **** html,body { margin: 0; padding: 0; height: 100%; } div#catwrapper{ background:#e6e6e4; overflow: hidden !important; overflow: visible; min-height: 100%; height: auto !important; height: 100%; width:1004px; z-index:-100; } div#catwrapper div#catSidePhotoBg , div#catwrapper div#catsidemenu{ float:left; padding-bottom: 32767px !important; margin-bottom: -32767px !important; padding-bottom: 0; margin-bottom: 0; overflow:hidden; height: 100%; } div#catsidemenu{ height: 100%; width: 400px; } div#catsidemenu div#catSidePhoto{ display:block; width:217px; height:800px; overflow:hidden; } div#catsidemenu ul { display:block; margin:0 0 0 230px; padding:300px 0 0; background:#FF9900; } div#catsidemenu ul li{ display:block; width: 400px; margin:5px 0; } div#catSidePhotoBg{ background:#33CC00; width:257px; display:block; position:relative; z-index:150; overflow:hidden; } div#catSidePhoto{ background:#006600; display:block; width:217px; overflow:hidden; } div#catbody{ width:auto; padding:90px 0 0; margin:0 0 0 420px; height:100%; text-align:left; } .cl { display: inline-block; } .cl:after { content: ""; display: block; clear: both; }