フッター固定で余白ができます

解決済

質問者：Rafi
質問日時：2013/06/27 14:05
回答数：2件

footerFixed.js　http://blog.webcreativepark.net/2007/11/16-01225 …　
を使ってhtmlのフッターを下部に固定させてみたところ、コンテンツが少ない量でページの最後にフッターが表示されるようになったのですが、コンテンツがあるコンテナが下部にのびず、背景が見えてしまう状態で尚かつ、コンテンツの最後から妙に大きな空白が開きます。
ブラウザで確認するとウインドウをリサイズすると戻るのですが、原因や対処がまったくわかりません。
どなたかコンテンツをフッターにつけた状態でフッターを下部に表示し、コンテンツが多い場合にはスクロールでフッターが出るようにするにはどのような方法で対応できるでしょうか。どなたかご意見いただければと思います。

通報する

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

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： ORUKA1951
回答日時：2013/07/01 11:04

スタイルシートで行うには、

・ルート要素はウィンドウサイズを100%とみなすこと
・ブロックは、直近のstatic以外の親コンテナブロックの位置やサイズを参照すること
・absoluteはその要素は指定されると、以後の要素は存在しなかったように配置されること
・relativeは本来の位置にあるように処理されること
このあたりを覚えておけば難しくはないです。
　⇒9. 視覚整形モデル( 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>サンプル</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>1・・・</p>
＿＿＿<p>2・・・</p>
＿＿＿<p>3・・・</p>
＿＿＿<p>4・・・</p>
＿＿＿<p>5・・・</p>
＿＿＿<p>6・・・</p>
＿＿＿<p>7以下増減</p>

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