- 締切済み
レイアウトの実現が出来ずにこまっています。
レイアウトの実現が出来ずにこまっています。 実現させたいレイアウトは添付の画像の通りで、 Firefoxでは各要素をposition:absolute;で指定して、うまくいきました。 しかしIEでは、添付画像でいうところの白いtableに指定したposition(高さ)が反映されません。 幅はwidth:100%;でFF,IEともに問題なしです。 各要素にheight:100%;としてしまうと、 当然FFでもIEでもhtml,bodyのheight:100%;を継承してしまい tableがピンクの部分からはみ出てしまいます。 なんとかこのピンクの要素の中でテーブルの高さをめいっぱいに表示させたいのですがむりなのでしょうか。
- haruru0331
- お礼率56% (18/32)
- HTML
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- kuzumiHK
- ベストアンサー率72% (132/183)
もし、table内のコンテンツを天地センターにする必要がないのであれば、 下記のような書き方も、現状のブラウザの実装状況のなかで、positionを使った場合のサンプルになると思います。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- *{ margin:0; padding:0; border-top:1px solid #f00; border-bottom:1px solid #f00; } body{ width:100%; } div#all{ position:relative; float:left; width:100%; border-top:1px solid #000; border-bottom:1px solid #000; } div#main{ float:left; width:80%; } div#header{ position:absolute; top:0; left:0; width:80%; height:60px; } div#contents{ padding:60px 0 70px; width:100%; } div#footer{ position:absolute; bottom:0; left:0; width:80%; height:70px; } div#side{ float:right; width:20%; } --> </style> </head> <body> <div id="all"> <div id="main"> <div id="header">ヘッダ</div> <div id="contents">コンテンツ</div> <div id="footer">フッタ</div> </div> <div id="side">サイド</div> </div> </body> </html> 質問の内容を実現しようとしたときに、以下のような矛盾が発生します。 tableのheightを100%にしたときに高さが画面いっぱいになるには、互換モードを使用する必要があります。 しかし、positionを安定性の高い状態で使用するには標準準拠モードにする必要があります。 （doctype宣言の書き方で、ブラウザやバージョンごとに、互換モードになったり、標準準拠モードになったりします） 互換モードは、標準準拠モードと違い、スタイルが正しく効かないことが多いです。 フルcssを目指すのであれば、標準準拠モードで書けるようにならなければなりません。 問題は、IE6とIE7が消えるまではtableと同じようなレイアウトをJSなしを行うことができない点です。 質問者様はtableとフルcssの混在で妥協点を見出したいと思われているのではないかと思いますが、混在させると多くのバグが発生する恐れもありますので、ご注意ください。。
- nekomikekamo
- ベストアンサー率73% (71/97)
テーブルを含む要素の高さと横幅をどのように定義しているかは不明ですが。 (sideの高さが100%なので左側の要素の高さも合計100%になるんでしょうか？) [css] html{height:100%} body{height:100%;margin:0;padding:0;} div#container{position:relative;height:100%;min-height:100%;background:#FFD5AA;} div#side{position:absolute;left:100%;width:200px;height:100%;min-height:100%;background:#FFFFAA;} div#main_cont{position:relative;left:0;width:100%;height:100%;min-height:100%;background:#EAFFAA;} div#main{position:relative;height:100%;min-height:100%;background:#AAFFBF;} div#header{height:60px;background:#AAFFEA;} div#footer{height:70px;background:#C1AAFF;} div#main table{height:100%;min-height:100%;width:100%;} [html body部] <div id="container"> <div id="side">side</div> <div id="main_cont"> <div id="header">header</div> <div id="main" style=""> <table id="main_t" border="1"> <tr><th>aaaa</th><th>bbbb</th></tr> <tr><td>1111</td><td>2222</td></tr> </table> </div> <div id="footer">footer</div> </div> </div> <script> (function(){ var clienth = function(){ if (window.innerHeight){ return id("side").clientHeight; } else { if (document.documentElement && document.documentElement.clientHeight) { return document.documentElement.clientHeight; } else { if (document.body.clientHeight) { return document.body.clientHeight; } } } return 0; }; var id = function(selector){ var el=null; if (document.getElementById) { el = document.getElementById(selector); }else{ if (document.all){ el = document.all[selector]; } } return el; }; var calc_height=function(){ var ids = ["main","main_t"]; var h= clienth()-130; if(h>0){ for(var i=0;i<ids.length;i+=1){ id(ids[i]).style.height =h+"px"; id(ids[i]).style.minHeight =h+"px"; } } }; calc_height(); window.onresize = calc_height; })(); </script>
- nine999
- ベストアンサー率44% (512/1140)
position:absoluteということは、ウィンドウや他のオブジェクトとは独立したオブジェクトなので、上下のオブジェクトに自然に合わせることはできないという状況ですね。 また、ウィンドウのサイズが変わったときにも対応する必要があるので、JavaScriptを使ってウィンドウサイズを取得（ブラウザによって若干異なる）して、ピンクの要素の大きさを計算してから適用（随時変更）する方が良いでしょう。 それ以外だと、根本的に組み替える必要が出てくるかと思います。
