プロが教えるわが家の防犯対策術!

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.の「はみ出した場合のサイズ追従」はできません。この両方を実現することってできませんか?

A 回答 (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>
    • good
    • 2

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



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

IMGのほうがどのブラウザでもうまくいくとは思いますが、あまり美しい解決方法ではないかもしれません。(^ ^;)
    • good
    • 3

こんにちは



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

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

html,body{height:100%;margin:0;padding:0;}


#main{min-height:100%;}
こんな感じで。

ただし、min-heightは他のブラウザに比べてIEでの実装が遅れていてIE7からになります。
IE6がかなりの割合いを占めている間は使いづらいですね。
    • good
    • 1

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!