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

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なのかますます分からなくなってしまいました。

だらだらとした文面で申し訳ないのですが、解説していただければ大変助かります。

このQ&Aに関連する最新のQ&A

A 回答 (1件)

理由は単純で、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-html4 … )」
  HTML5の「新しい要素 」がその意味・用途と共に参考になるでしょう。
 ←新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/h … )
 なお、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 … )」を見ていただくことにして・・。
・4.3.3 パーセント値(Percentages) ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
・8.1 ボックスの寸法(Box dimensions) ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
・10.5 内容領域の高さ(Content height: the 'height' property) ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )★重要
・10.7 高さの最大値と最小値(Minimum and maximum heights: 'min-height' and 'max-height') ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )

[サンプル]タブは_に置換してあります。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>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
__</div>
_</div>
</body>
</html>
    • good
    • 1
この回答へのお礼

お礼が大変遅くなり、まことに申し訳ございません。

付け焼刃の知識のみでWebページを作っていたため、実はご回答いただいた内容がよく理解出来ないまま、長い間、質問したきりとなっておりました。

min-heightは最小サイズしか決めないため、その他の場合に自動調整される、ということですね。

サンプルや参考情報まで詳しくご回答頂きとてもためになりました。
本当にありがとうございました!

お礼日時:2013/05/30 00:47

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Qtableのcellpadding="0" cellspacing="0"をCSSで

tableのcellpadding="0" cellspacing="0"をCSSで設定する方法を検索したところ、
border-collapse:collapse;
border-spacing:0;
というアドバイスが記載されていました。
実際に使ってみたのですが、
どうしてもセル余白とセル間隔が発生してしまいます。
どうしたらよいですか。

Aベストアンサー

border-spacingはborder-collapseの値がseparateのときしか有効にならないそうです。
http://www.htmq.com/style/border-spacing.shtml

サンプルが
http://www.htmq.com/style/border-collapse.shtml
にあるので参考にしてください。

# それにしてもこんなプロパティがあるとは知らなかった…

参考URL:http://www.htmq.com/style/border-spacing.shtml

Qレイアウトが崩れないようにするための、

<div class="a">で一度幅や高さの指定をしているのに、ウインドウサイズを変更しても、レイアウトが崩れないようにするために、その<div>からさらに<div>で囲むのはなぜなんでしょうか?

<div id="wrapper">
 <div class="a"></div>
</div>

div.a {
width:900px;
}

#wrapper{
width:900px;
}

Aベストアンサー

「ウインドウサイズを変更しても、レイアウトが崩れないようにするため」ではないでしょうか?(^^;

divをdivで囲う理由は、色々ありますが、この場合ですと、
<div id="wrapper">
という大きなブロックと
<div class="a">
という、さっきのブロックの中にある一つのブロック
と、意味のあるブロック単位に明示的に分けていると考えられます。
この形ですと、<div id="wrapper">の中に、<div class="a">を複数設置したり、<div class="b">を併設したり、色々できますね。

両方width:900px;を指定しているのは、どっちか片方だけだと、デザインが崩れるブラウザもあるからです。両方指定しておけば確実ですね。

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

QCSS、width100%でもできる余白

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<div id="logo"></div>
<div id="menu"><ul><li>home</li><li>profile</li><li>works</li></ul></div>
</div>
</div>
<div id="contents"><div class="centerbox">contents</div></div>

<div id="footer"><div class="centerbox">footer</div></div>

</body>
</html>


CSS

body{color:white; width:100%;}
.centerbox{width:500px; height:100%;}
a:hover{background-color:red;}

/*base layout*/
#header{width:100%; height:auto; text-align:center; background-color:black;}
#lang{text-align:right;}
#lang li{list-style:none; display:inline; margin-left:10px}
#logo{float:left; width:150px; height:80px; background-color:white;}
#menu{text-aign:right; margin-top:50px;}
#menu li{list-style:none; display:inline; margin-left:10px}
#contents{width:100%; height:300px; background-color:gray; text-align:center; border-top:6px double yellow; border-bottom:6px double yellow;}
#footer{width:100%; height:100px; text-align:center; background-color:black;}

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<di...続きを読む

Aベストアンサー

スタイルシートの書き始めに、
html,body{margin:0;padding:0;}
の一行を入れておくようにすれば回避できます。
 これは常に入れておきましょう。

 なお、今後のために・・・どの部分が影響しているかは
*{border:solid 1px red;}
を入れてみると、わかりやすいです。

また、firefoxの開発者向けツール ( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )にあるFirebug | Firefox アドオン | Mozilla Japan の公式アドオン紹介サイト ( https://addons.mozilla.jp/firefox/details/1843 )を使うと、このあたりがよくわかると思います。

Q「いずれか」と「いづれか」どっちが正しい!?

教えて下さいっ!
”どちらか”と言う意味の「いずれか」のかな表記として
「いずれか」と「いづれか」のどちらが正しいのでしょう???

私は「いずれか」だと思うんですが、辞書に「いずれか・いづ--。」と書いてあり、???になってしまいました。
どちらでもいいってことでしょうか?

Aベストアンサー

「いずれか」が正しいです.
「いづれ」は「いずれ」の歴史的かな遣いですので,昔は「いづれ」が使われていましたが,現代では「いずれ」で統一することになっていますので,「いずれ」が正しいです.

Q