高さ指定を動的にする方法

締切済

質問者：sunny_11
質問日時：2012/10/05 01:07
回答数：3件

footer部分の高さをmain部分の文章量に応じて、
footer部分の高さを変えたいと思います。
■main部分の文章量が多く画面がスクロールできる状態は
footer部分の高さを200pxにします
■main部分の文章量が少なく画面下に余白ができてしまう場合は
footer部分で埋めます

header,main,footerの外枠としてcontainerがあります

下記のソースコードがヒントになるかと思い少し変えてやっていますが
うまくいきません。
*{
margin:0;
padding:0;
}
html,body{
height:100%;
}
div#footer{
background-image:url(back.jpg);
height:100%;
min-height: 100%;
}
body > #container > #footer {
height: auto;
}

ご指導いただけないでしょうか。
よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

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

No.3

回答者： ORUKA1951
回答日時：2012/10/07 15:28

ウィンドウの高さは、html,bodyにheight:100%;position:relative;で参照できるようになりますが・・その方法でも期待通りにはなりません。

なぜなら内容のない部分までスクロールさせないように・・ユーザーに全部でどこまであるかスクロールバーで判断できるようになっているからです。
　堅苦しい説明は置いておいて、似た状態にするには文書全体を<div>、HTML5では<article>で括ってしまえば良いです。
★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html )
で検証済みのHTML4.01strictです。タブは＿に置換してあります。

*{
margin:0;
padding:0;
}
は指定しないほうが良いです。他の要素が登場するたびにすべて再設定が必要になりスタイルシートが煩雑になります。
header,section,footerなどセクションを示す名称は複数回登場するものなのでIDではなくclassで指定しましょう。
　HTML5では、そのまま書き換えればよくなります。classだと詳細度が低く、かつ複数個所が一度に設定できますから・・
IDはリンクやjavascriptのターゲット、文書内に必ず一度しか登場し得ない要素にのみ使用するほうが楽です。

[HTML5]
<body>
　<header></header>
　<section>
　　<section></section>
　　<article>
　　　<header></header>
　　　<section></section>
　　　<footer></footer>
　　</article>
　　<aside>
　　　<h2></h2>
　　</aside>
　</section>
　<footer></footer>
</body>

<!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>サンプル</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">

＿</style>
</head>
<body>
＿<div class="article">
＿＿<div class="header">
＿＿＿<h1>タイトル</h1>
＿＿＿<p>このページでは・・・・</p>
＿＿</div>
＿＿<div class="section">
＿＿＿<h2>見出し</h2>
＿＿＿<p>footer部分の高さをmain部分の文章量に応じて、</p>

＿＿</div>
＿＿<div class="footer">
＿＿＿<h2>文書情報</h2>
＿＿＿<dl class="documentHistry">
＿＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿＿<dd>2012-08-10</dd>
＿＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt>
＿＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd>
＿＿＿</dl>
＿＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿＿</div>
＿</div>
</body>
</html>