CSSでdivのheightを動的に

締切済

質問者：taku17
質問日時：2007/08/03 06:06
回答数：4件

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件)

最新から表示
回答順に表示

No.4

回答者： shirayukix
回答日時：2007/08/05 11:05

こんなのでどうでしょう？

ウィンドウの高さより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>

- 2
- 件

通報する

No.3

回答者： h_0
回答日時：2007/08/05 09:43

理想はCSSのmin-heightだと思いますが、他の方が書かれているように対応していないブラウザがあります。

そこで私がよくやるのは、最低の高さを確保するために、1px x 1pxの透明GIFをDIV内に配置（align='right')、そのIMGタグ内にミニマムの高さを指定する、か、IMGの代わりに、何もないDIVタグをスタイルシートで高さを指定してfloatさせています。

IMGのほうがどのブラウザでもうまくいくとは思いますが、あまり美しい解決方法ではないかもしれません。（＾＾；）

- 3
- 件

通報する

No.2

回答者： leap_day
回答日時：2007/08/03 17:24

こんにちは

<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>

でそれらしく見せることも出来ないこともないですけど・・・
こういう小手先の技ではなく王道で？