フッターを固定する方法
スポンサーリンク

01Footerを一番下に固定する

Footerが画面上に浮き上がってしまうことってありませんか?
画面内容に応じてFooterが動いてしまうとせっかくのWebサイトもなんだか落ち着きのないものになってしまいますよね。

様々な方法がいくつかあるのですが、一番わかりやすい方法を一つ紹介します。

HTML
<header>HEADER </header >
 <div class="main" ></div>
<footer> FOOTER </footer >
CSS
header{
    background-color:#FF0004;
    height:100px;
    }

 .main{
    background-color:#FD9500;
    margin:0 auto 0 auto;
    width:800px;
    height:300px;
    }

footer{
    background-color:#2A00FF;
    height:100px;
    width:100%;
    position:absolute;
    bottom:0;
    }
スポンサーリンク

この記事が気に入ったらフォローしよう

おすすめの記事