- 締切済み
CSSでdivのheightを動的に
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.の「はみ出した場合のサイズ追従」はできません。この両方を実現することってできませんか？
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- shirayukix
- ベストアンサー率43% (90/207)
こんなのでどうでしょう？ ウィンドウの高さより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)
理想はCSSのmin-heightだと思いますが、他の方が書かれているように対応していないブラウザがあります。 そこで私がよくやるのは、最低の高さを確保するために、1px x 1pxの透明GIFをDIV内に配置（align='right')、そのIMGタグ内にミニマムの高さを指定する、か、IMGの代わりに、何もないDIVタグをスタイルシートで高さを指定してfloatさせています。 IMGのほうがどのブラウザでもうまくいくとは思いますが、あまり美しい解決方法ではないかもしれません。（＾ ＾；）
- leap_day
- ベストアンサー率60% (338/561)
こんにちは <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)
html,body{height:100%;margin:0;padding:0;} #main{min-height:100%;} こんな感じで。 ただし、min-heightは他のブラウザに比べてIEでの実装が遅れていてIE7からになります。 IE6がかなりの割合いを占めている間は使いづらいですね。
