CSSでフッターの下の余白を取り除きたい

CSSでフッターの下の余白を取り除き、フッターをページの最下部としたいです
フッターは「top:-50px」のような感じで少し上にずらしており、色々試したのですが上手くいきません
この場合は余白は取り除けないのでしょうか
実際に組んでいるコードはかなり長いので、以下はサンプルコードになります
どなたか詳しい方、御助力お願いします

<link rel="stylesheet" type="text/css" href="test.css">
<head>
</head>
<body>
<div id="page">
	<div id="pageHead">
		<div align="center">
			<h1>TITLE</h1>
		</div>
	</div>

	<div id="pageBody">
		<div align="center">
			<div class="main"></div>
		</div>
	</div>

	<div id="pageBottom">
		<div align="center">
			<div class="bottom"></div>
		</div>
	</div>
</div>
</body>
</html>
コード

	min-height:100%;
	margin-bottom:-50px;
	display: flex;
 	flex-direction: column;
}

#pageHead h1{
	background-color:#e33;;
	padding:50px 100px;
}

#pageBody .main{
	width:1000px;
	height:1000px;
	background-color:#aaa;
	position:relative;
	top:-21px;
}

#pageBottom{
	padding:50px 100px;
	background-color:#e33;
	position:relative;
	top:-100px;
}
コード

kei344

2018/07/14 15:10

（質問文は編集できます）CSSが切れているので修正してください。また、top:-100px;がどのような描画を意図して設定されているかも提示されたほうがよいと思います。

s8_chu

2018/07/14 17:16

HTMLの記述がおかしいですが、コピペミスでしょうか？他にも質問文に記述していない箇所があれば、質問文に追記していただけませんか？

efcode

2018/07/14 21:05

下のCSSの一行目は #page { って事でいいのかな、正しいコードを提示する事で、正しい回答が得られると思うので、質問の仕方も丁寧にした方がよりよい回答が得られると思います。

行動規範の内容に同意します

回答2件

ベストアンサー

質問のフッター部分が#pageBottomだと思いますが、その要素にposition:relative;とtop:-100px;を設定しているので下側に「余白」は出来ます。

参考
見ながら覚えよう！positionプロパティ「absolute」と「relative」についてのお話

他の方も言われていますが、レイアウト位置が思ったとおりにいかない場合、簡素化でも良いので、症状が再現可能な、関連するHTML・CSSのコードは必須となります。（状況によりJS等）

また、キャプチャー画像やイメージ画像（手書きでも可）を貼付されると、より良い回答を得れると思います。

投稿2018/07/14 22:13

yoshinavi

総合スコア3523

l_h_l_h

2018/07/16 10:47

回答ありがとうございました relativeを多用してしまっていたためレイアウトがおかしくなっていたようです relativeの部分をabsoluteに変えることで直りました今一度基礎から勉強し直そうと思いますありがとうございました

行動規範の内容に同意します

以下のCSSを追加してください。そうする事で要素間の隙間がゼロになり、topやらbottomやらを指定する必要がなくなります。

CSS
1#page * {
2  margin: 0;
3  padding: 0;
4}

また、#page を body に書き換える事で、全ての要素の余白をゼロに出来ます。必要な場合はそうしてください。
top:-100; などとしているのは要素間のマージンを消す為だと思うのですが、要素のマージンは要素のマージンを0と指定することで消す様にしてください。マージン幅は環境によりpxサイズが異なります。

投稿2018/07/14 21:16

efcode

総合スコア422