m_shige1979のささやかな抵抗と欲望の日々

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

なんとなく作ったサイト

http://www.it-check-matome.info/


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でかいたら結構崩れるな…これがいやだからインデントはスペース派がいるということだな。

広告を非表示にする