m_shige1979のときどきITブログ

プログラムの勉強をしながら学習したことや経験したことをぼそぼそと書いていきます

Github(変なおっさんの顔でるので気をつけてね)

https://github.com/mshige1979

CSSでフッターを最下に配置

なんかいろいろなところにサンプル

とりあえず、覚書メモ

サンプル

html
<!DOCType html>
<html>
	<head>
		<meta charset="utf8" />
		<title>CSSサンプル</title>
		<link href="./css/main.css" type="text/css" rel="stylesheet">
	</head>
	
    <body>
        <div id="wrap">
             <header>
             	ヘッダー
             </header>
             <div id="contents">
             	<div class="content-data">
					<ul>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
						<li>あああああああああああああああ</li>
					</ul>
				</div>
             </div>
             <footer id="footer">
             	<div class="copyright">
             		フッター
             	</div>
             </footer>
        </div><!-- wrap -->
    </body>
</html>
css
@CHARSET "UTF-8";

*{
	margin: 0px;
	padding: 0px;
}

html,body{
     height:100%;
}

body{
	background-color: #CCCCCC;
}

#wrap{
	width: 100%;
	position: relative;
	height:auto !important; /*IE6対策*/
	height: 100%; /*IE6対策*/
	min-height: 100%;
     
	width: 900px;
	margin: 0px auto;
	background-color: #FFFFFF;
}

#wrap header{
	height: 80px;
	background-color: #98EAFF;
}

#contents{
	padding: 10px;
	padding-bottom:80px; /*フッターの高さと同じ*/
}

#contents ul{
	padding-left: 20px;
}

#footer{
	height:80px;
	position:absolute;
 	bottom:0;
	right: 0px;
	width: 900px;
	background-color: #98EAFF;
}

#footer .copyright{
	right: 0px;
	position: absolute;
}
結果(下スクロールする場合)

f:id:m_shige1979:20131116235153j:plain
f:id:m_shige1979:20131116235201j:plain

結果(1ページ以内に収まる場合)

f:id:m_shige1979:20131116235209j:plain

参考にさせていただたページ

まとめ

positionのrelative、absoluteをうまく利用することで対応できる。
あと、フッターの部分を調製するためにpadding-bottomを利用する。他にも方法はありそうだが
今回はこの方法で覚える。

うーん

tabでかいたら結構崩れるな…これがいやだからインデントはスペース派がいるということだな。