締切済み

CSSでdivのheightを動的に

2007/08/03 06:06

DIV要素を作り、その中にテキストを配置しています。これの高さ(height)をCSSで次のようにしたいのですが。どのようにすれば良いでしょうか。 1.文章量が多く、画面外まではみ出したらDIV要素の高さをそれに追従させる。 2.文章が画面内に収まる場合、余ったスペースをDIV要素ですべて埋める。 DIV要素のheightを動的に変化させたいのでpxによる絶対値指定はしません。パーセント指定で100%にしてもうまくいかず、調べてみたところこれは親要素の値に依存するとのことでした。そこで html, body { height: auto; } #main { height: auto; } としてみたところ、1.の「はみ出した場合のサイズ追従」は実現できましたが、2.の「余ったスペースを埋める」ことはできませんでした。逆に html, body { height: 100%; } #main { height: 100%; } にすると2.の「余ったスペースを埋める」ことはできますが1.の「はみ出した場合のサイズ追従」はできません。この両方を実現することってできませんか？

taku17
お礼率11% (87/767)

CSS
回答数4
ありがとう数5

みんなの回答 （4）
専門家の回答

みんなの回答

shirayukix
ベストアンサー率43% (90/207)

2007/08/05 11:05 回答No.4

こんなのでどうでしょう？ウィンドウの高さよりdivの高さが小さければ、divの高さを変更します。 <script> function f(){ if(window.innerHeight){h=window.innerHeight;} if(document.documentElement && document.documentElement.clientHeight){ h=document.documentElement.clientHeight; } else if(document.body && document.body.clientHeight){ h=document.body.clientHeight; } if(document.getElementById){ a=document.getElementById('main'); if(a && a.style && a.style.height<h){ a.style.height=h+'px'; } } } </script> <body onload="f()" leftmargin=0 topmargin=0> <div id="main" style="border:1px solid"> hoge<br> </div> </body>

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

h_0
ベストアンサー率30% (7/23)

2007/08/05 09:43 回答No.3

理想はCSSのmin-heightだと思いますが、他の方が書かれているように対応していないブラウザがあります。そこで私がよくやるのは、最低の高さを確保するために、1px x 1pxの透明GIFをDIV内に配置（align='right')、そのIMGタグ内にミニマムの高さを指定する、か、IMGの代わりに、何もないDIVタグをスタイルシートで高さを指定してfloatさせています。 IMGのほうがどのブラウザでもうまくいくとは思いますが、あまり美しい解決方法ではないかもしれません。（＾＾；）

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

leap_day
ベストアンサー率60% (338/561)

2007/08/03 17:24 回答No.2

こんにちは <div></div> <div id="main"></div> や <div id="main"></div> <div></div> などではなく<div id="main">がページコンテンツ全体を覆っているという前提の下でしたら <style type="text/css"> html, body { height: 100%; margin:0px; } #main { height: 100%; overflow:auto; } </style> でそれらしく見せることも出来ないこともないですけど・・・こういう小手先の技ではなく王道で？

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

steel_gray
ベストアンサー率66% (1052/1578)

2007/08/03 11:13 回答No.1

html,body{height:100%;margin:0;padding:0;} #main{min-height:100%;} こんな感じで。ただし、min-heightは他のブラウザに比べてIEでの実装が遅れていてIE7からになります。 IE6がかなりの割合いを占めている間は使いづらいですね。

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