- 締切済み
min-heightとheightの違いについて
HTML、CSSを勉強中です。 こちらで似た質問は拝見したのですが、疑問が解決できなかったので投稿させて頂きます。 ページの内容が少ないときにもフッターを最下部に表示させるため、 いくつかのサイトを参考にさせて頂いて以下のようなコードを書きました。 ・HTML(一部) <html> <body> <div id="container"> <div id="article">内容</div> <div id="footer">フッター</div> </div> </body> </html> ・CSS（一部） html,body { height: 100%; } div#container { position: relative; min-height: 100%; } body > #container { height: auto; } div#article { padding-bottom: 20px; } div#footer { position: absolute; bottom: 0px; height: 20px; width: 100%; } これで目的は達成したのですが、ほぼ丸写しの作業で、containerにheightではなくmin-heightを指定する意味がよく分かりません。 min-heightは高さの最小値を設定するプロパティとのことで、これ自体が上手くいくことは分かるのですが、何故heightに替えると上手くいかないのかが分かりません（実際に、フッターがページ内容の終わり位置まで浮き上がってきます)。 親のbody、親の親のhtmlの高さが100%に指定されているのだから、containerの高さ(height)もこれらに対して100%とすることで画面いっぱいの高さが常に確保されるのかと思ったのですが、違うのでしょうか。 そもそもhtmlの高さは何に対して100%なのかと調べてみると「表示領域に対して」とのことで、実はこの記載があったページではmin-heightではなくheightを利用してボックスの高さを100%に出来るとまとめてあったのですが、上述の通り私は今回の目的には上手く利用できませんでした。 「高さ100%のhtml、bodyに対してcontainerのheightが100%」というのが上手くいかないのなら、 何故heightをmin-heightに替えるだけでOKなのかますます分からなくなってしまいました。 だらだらとした文面で申し訳ないのですが、解説していただければ大変助かります。
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
理由は単純で、footerがデフォルトのoverflow:visibleのため、折角配置されても下に突き抜けてしまうためです。 heightとmin-heightの違いは、heightはサイズを決めてしまいますが、min-heightは最初サイズしか決めませんから自動調整されます。 下のサンプルで本文が少ない場合はいずれでもまったく同じになるはずです。 横幅の場合は書きサンプルのように組み合わせて使用することが多いでしょう。たての場合は、ウィンドウ幅やフォントサイズが変わると長くならなければならないので通常はheightで高さを決めないほうが良いです。 常に高さを固定する場合はoveflowの値をautoなりhiddenにします。 ちょっとHTMLを書き直します。 ※class名やid名は文書構造を示すものにします。idはリンクやjavascriptののターゲットにする以外は使わないほうが色々な意味で楽です。classだと複数個所を一度に指定できる。 ←「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」 HTML5の「新しい要素 」がその意味・用途と共に参考になるでしょう。 ←新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements ) なお、header,footer,articleなどはひとつの文書中に何度も登場する可能性があるのでclass名のほうが良いです。将来HTML5でページを作成する場合、そのまま<div class="section">→<section>に書き換えるだけです。 ★HTMLには文書構造しか書かないので後々のメンテナンスが楽です。HTMLもCSSもわかりやすくなりますしね。 <html> <body> <div class="article"> <div class="header><!-- 文書のヘッダー --> </div> <div class="section><!-- 本文 --> 内容 </div> <div class="footer"><!-- フッタ --> フッター </div> </div> </body> </html> の場合 html,body {margin:0;padding:0;height:100%;line-height:1.6em;} body>div.article>div>*{margin:0 20px;} body>div.article{ width:80%;min-width:480px;max-width:800px; margin:0 auto; min-height:100%; position:relative; } body>div.article>div.section{padding-bottom:40px;} body>div.article>div.footer{position:absolute;bottom:0;width:100%;height:40px;} で叶えられると思います。--IE6など子供セレクタを理解できないブラウザには、子孫セレクタを使って書き直す必要があります。 [その他気付き] div#container(詳細度0,1,0,1)・・・一意セレクタは詳細度が高いためタイプセレクタがなくても良いです。 body > #container(詳細度0,1,0,1)・・詳細度同じですから追記されます。 詳しくは「REC-CSS2 邦訳 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html#toc )」を見ていただくことにして・・。 ・4.3.3 パーセント値（Percentages） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/syndata.html#percentage-units ) ・8.1 ボックスの寸法（Box dimensions） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/box.html#box-dimensions ) ・10.5 内容領域の高さ（Content height: the 'height' property） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visudet.html#the-height-property )★重要 ・10.7 高さの最大値と最小値（Minimum and maximum heights: 'min-height' and 'max-height'） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visudet.html#min-max-heights ) [サンプル]タブは＿に置換してあります。HTML4.01strict+CSS2.1です。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル0</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body {margin:0;padding:0;height:100%;line-height:1.6em;} body>div.article>div>*{margin:0 20px;} body>div.article{ width:80%;min-width:480px;max-width:800px; margin:0 auto; min-height:100%; position:relative; } body>div.article>div.section{padding-bottom:40px;} body>div.article>div.footer{position:absolute;bottom:0;width:100%;height:40px;} /* おまけ・・色分け */ body{background-color:gray;} div.article{background-color:white;} div.header{background-color:aqua;} div.footer{background-color:yellow;} --> ＿</style> </head> <body> ＿<div class="article"> ＿＿<div class="header"> ＿＿＿<h1>タイトル</h1> ＿＿＿<p>このページでは・・・・</p> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h2>見出し</h2> ＿＿＿<p>ここに自由な長さの文章を入れてみる</p> ＿＿</div> ＿＿<div class="footer"> ＿＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿＿</div> ＿</div> </body> </html>
お礼
お礼が大変遅くなり、まことに申し訳ございません。 付け焼刃の知識のみでWebページを作っていたため、実はご回答いただいた内容がよく理解出来ないまま、長い間、質問したきりとなっておりました。 min-heightは最小サイズしか決めないため、その他の場合に自動調整される、ということですね。 サンプルや参考情報まで詳しくご回答頂きとてもためになりました。 本当にありがとうございました！