Saetl.net

Simple And Easy TempLate

CSS Sticky Footerの使い方

  1. 下記サイトを参考にファイルを作成。
  2. 作成したファイルを任意の場所にコピー。
    ファイル構成
  3. 動作させるファイル(サンプルではindex.html)にコードを記述。
    パスは上記ファイル構成の場合なので環境にあわせて変更>
    ・head部分にcssファイルを読み込ませるためのコードを記述。
    <head>
    <!--作成したファイル-->
    <link rel="stylesheet" type="text/css" href="css/CSS Sticky Footer.css" />
    </head> 
    

    サンプルのcssコード

    * {
    	margin: 0;
    	padding: 0;
    }
    html, body {
    	background: #fff;
    	height: 100%;
    }
    .container {
    	min-height: 100%;
    	height: auto !important;
    	height: 100%;
    	margin: 0 auto -4em;
    }
    .footer {
    	background: #000;
    	height: 4em;
    	color: #FFF;
    	text-align: center;
    }
    
    ・<body></body>内にコードを記述
    <div class="container">  </div>
    <div class="footer">	
      <p>footer</p>
    </div>
    

    サンプルのhtmlコード

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8" />
    <title>CSS Sticky Footer</title>
    <link rel="stylesheet" type="text/css" href="css/CSS Sticky Footer.css" />
    </head>
    
    <body>
    <div class="container">  </div>
    <div class="footer">	
      <p>footer</p>
    </div>
    
    </body>
    </html>
    
  4. ファイル1式をサーバーにアップロードして設置完了。
    サンプル