フッター上部に謎の隙間

解決済

質問者：oshiete_goo_gle
質問日時：2013/08/06 00:17
回答数：2件

フッター上部に謎の隙間ができて困っています。
以下ソースになります。

『HTMLソース』

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>サンプルページ</title>
<meta name="description" content="" />
<meta name="author" content="." />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />

<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.11.0/build/cssreset/c …
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></s …
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min. …
<script type="text/javascript">
$(function(){
$(".hide").hide();
$(".btn").click(function(){
$(".hide").next().slideToggle();
});
})
</script>
</head>
<body>
<div id="conteiner">
<header>
<div class="center">
<h1>ヘッダー</h1>
</div>
</header>
<div id="box_001">
<div id="box_002">
<div class="center">
<h2>見出し</h2>
<p class="btn">ボタン</p>
<ul>
<li><img src="A.png" alt="img" width="250" height="250" /></li>
<li><img src="A.png" alt="img" width="250" height="250" /></li>
<li><img src="A.png" alt="img" width="250" height="250" /></li>
<li class="hide"><img src="A.png" alt="img" width="250" height="250" /></li>
<li class="hide"><img src="A.png" alt="img" width="250" height="250" /></li>
<li class="hide"><img src="A.png" alt="img" width="250" height="250" /></li>
</ul>
</div>
</div>
</div>
<footer>
<div id="box_003">
<p>フッター</p>
</div>
</footer>
</div>
</body>
</html>

『CSSソース(style.cssで読み込んでます)』

html,body {
height: 100%;
width: 100%;
}

#conteiner {
width: 100%;
height: 100%;
}

.center{
width: 100%;
max-width: 1040px;
height: auto;
margin: 0 auto;
}

.center:after {
content: ".";
display: block;
height: 0;
font-size:0;
clear: both;
visibility:hidden;
}

header {
width: 100%;
height: 300px;
background: #ff7f50;

}

#box_001 {
background: #4169e1;
}

#box_002 {
background: #4169e1;
}

#box_001 ul {
margin-bottom: 150px;
}

#box_001 ul li {
float: left;
margin: 40px;
}

footer {
width: 100%;
height: 150px;
background: #ff7f50;
}

footer p {
line-height: 150px;
text-align: center;
}

通報する

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

質問の本文を隠す

回答 (2件)

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

No.2ベストアンサー

回答者： askaaska
回答日時：2013/08/07 15:50

>> 原因ってわかりますか？

こういう場合は不要なものを排除して考えるのよ
ボディタグの中で<div>～</div>等をどんどん削除すると

<body>

<div id="box_003">
<p>フッター</p>
</div>
</body>

こうなるわね
すると、一目瞭然
ブロック要素である<div>の直前にスペースがあるから
その行が1行追加されてしまっているのね