締切済み

レイアウトの実現が出来ずにこまっています。

2010/07/13 15:22

レイアウトの実現が出来ずにこまっています。実現させたいレイアウトは添付の画像の通りで、 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)

2010/07/20 01:00 回答No.3

もし、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">  </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)

2010/07/13 21:33 回答No.2

テーブルを含む要素の高さと横幅をどのように定義しているかは不明ですが。 (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)

2010/07/13 16:56 回答No.1

position:absoluteということは、ウィンドウや他のオブジェクトとは独立したオブジェクトなので、上下のオブジェクトに自然に合わせることはできないという状況ですね。また、ウィンドウのサイズが変わったときにも対応する必要があるので、JavaScriptを使ってウィンドウサイズを取得（ブラウザによって若干異なる）して、ピンクの要素の大きさを計算してから適用（随時変更）する方が良いでしょう。それ以外だと、根本的に組み替える必要が出てくるかと思います。

ログインすると、全ての回答が全文表示されます。