CSSで、contentsがfooterに重なってしまう

解決済

質問者：pomeranian2014
質問日時：2015/05/14 23:50
回答数：1件

スタイルシートでページを作成しています。

上からheader、contents, footerとボックスを配置しているのですが、
contentsの内容が多くなると、下に膨らむのですがこのときにページ最下部にあるfooterに重なってしまいます。
contents内には、さらにボックスが複数ありテキストや画像があります。

ためしにcontents内をすべてテキスト文字にしてたくさん記載をしたところ、
footerには重ならず、footerが自動的に下へ移動しました。

これは何がいけないのでしょうか？
なぜcontents内にボックスを入れると、footerに重なってしまうのでしょうか？

通報する

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

質問の本文を隠す

回答 (1件)

No.1ベストアンサー

回答者： ORUKA1951
回答日時：2015/05/15 14:30

多分floatを使っている。

＞header、contents, footer
header,section,footerですよね。contentsは変?そもそも複数形じゃないし。
　⇒HTML5新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/h … )
にあわせたほうが良かろうかと
<div class="header">
</div>
<div class="section">
　<h2>本文見出し</h2>
　<p>・・・</p>
　<div class="section">
　　<h3>項見出し</h3>
　　<p><img src="" width="" height="" alt=""></p>
　　<p>記事</p>
　　<div class="article">
　　　<div class="header"></div>
　　　<div class="section"></div>
　　　<div class="footer"></div>
　　</div>
　</div>
　<div class="nav">
　</div>
　<div class="aside">
　</div>
</div>
<div class="footer">
</div>
header,section,footerは何箇所も登場する可能性があるのでclassのほうが良いかな・・

[HTML5だと]
<header>
</header>
<section>
　<h2>本文見出し</h2>
　<p>・・・</p>
　<section>
　　<h3>項見出し</h3>
　　<p><img src="" width="" height="" alt=""></p>
　　<p>記事</p>
　　<article>
　　　<header></header>
　　　<section></section>
　　　<footer></footer>
　　</div>
　</section>
　<nav>
　</nav>
　<aside>
　</aside>
</section>
<footer>
</footer>

floatを使ってブロックの配置をしないことが原則ですが、画像の場合はfloatさせることもあるでしょうから、その場合にはfloatを終了させるコンテナブロックに対して
:afterまたは:beforeの擬似要素にて
{content:"";
clear:[right|left|both];
display:block;
}
のセットで良いはずです。

★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
　のDATAでチェック済みHTML4.01 + 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="header">
＿＿<h1>タイトル</h1>
＿</div>
＿<div class="section">
＿＿<h2>本文見出し</h2>
＿＿<p>・・・</p>
＿＿<div class="section">
＿＿＿<h3>項見出し</h3>
＿＿＿<p><img src="./images/01.jpg" width="240" height="180" alt="写真"></p>
＿＿＿<p>記事</p>
＿＿＿<div class="article">
＿＿＿＿<div class="header">HEADER</div>
＿＿＿＿<div class="section">SECTION</div>
＿＿＿＿<div class="footer">FOOTER</div>
＿＿＿</div>
＿＿</div>
＿＿<div class="nav">
＿＿＿ナビ
＿＿</div>
＿＿<div class="aside">
＿＿＿補足
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>フッタ</h2>
＿</div>
</body>
</html>