WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

footerを常に最下部に置く方法

f:id:mmmmofu:20160926203058p:plain

参考サイト

coliss.com

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>footerを最下部に置く</title>
</head>
<body>
  <main>
  </main>
  <footer>
  </footer>
</body>
</html>

CSS

html {
  min-height: 100%;
  position: relative;
}
body {
  margin-bottom: 100px;//footerの高さ
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
}