商用利用OK、加工OK、許可不要、ALL無料のホームページ素材集

WEBデザイナーが作った超シンプル素材集

TIPS MENU

MATERIAL MENU

がんばろうニッポン

CSSサンプル

ここでは、ちょっと役立つCSSをメモ程度に置いていきます。
ご自由にお使いいただけますが、設置後の動作を保障するものではありませんのでご注意ください。

CSSで“最低”の高さを指定する方法

昔っから、tableやdivなどの「幅」はともかく、「高さ」に苦戦しました。
CSS主流になってからは特にやっかいで、divに高さ指定して、うっかりして入れすぎるとテキストがびょ~~んとはみ出したりとか(笑)、そりゃもう「高さ」の概念はちょっと・・・的になってました。

いや、CSSでも「最低の高さ」を指定する「min-height」っていうプロパティがあるんですよ、実は。
でもね、これがまたおりこうさんのIEには効かなかったりするわけですよ。(泣)

で、いろいろ探してたら見つけました♪howtohp.comさんに載っていた方法をご紹介します。
これだとIEでもきちんと表示されるので便利!しかも簡単!
ありがたくて涙が出てきました。(笑)

::::: CSS表記 :::::

.takasa50 {
min-height:50px;
height:auto !important;
height:50px;

margin:0px 0px 10px 0px;padding:10px;
border:1px dotted #FF6600;
}
↑緑の太字が大事です!

::::: HTML表記 :::::

<div class="takasa50">このdivは、最低の高さ「50px」に指定してあります。</div>
<div class="takasa50">同じdivですが、テキスト量によって自動的に高さが変更になります。<br />
改行。<br />
もういっちょ。<br />
どうだ!<br />
よいしょ!<br />
よっこらしょ!<br />
ほらね!</div>

::::: 動作確認 :::::
このdivは、最低の高さ「50px」に指定してあります。
同じdivですが、テキスト量によって自動的に高さが変更になります。
改行。
もういっちょ。
どうだ!
よいしょ!
よっこらしょ!
ほらね!
更新日:2011.01.23 Category:CSSサンプル
HOMEへ このページのTOPへ