ページの下部にフッターを固定する方法
7231 ワード
まず、大体の構造を作ります.
cssの場合:
1.reset:html、bodyのmargin、paddingを取り除く.さらにheightを100%に設定し、後でサブ要素のパーセントを設定しやすいようにします.
2.div#containerコンテナに「position:relative」を設定して、中の要素が絶対的に位置決めされた後にdiv#containerコンテナを走らないようにする必要があります.
3.div#pageこのコンテナには重要な設定があり、このコンテナにpadding-bottom値を設定する必要があります.この値はフッターdiv#footerの高さ(height)値に等しい(またはやや大きい)必要がありますが、ここではpadding-bottomの代わりにmargin-bottomを使用してはいけません.そうしないと効果が得られません.
4.div#footerコンテナ:div#footerコンテナはpx(またはem)の単位で一定の高さを設定する必要があります.div#footerはまた、絶対位置決めを行い、bottom:0を設定する必要がある.div#footerをコンテナdiv#containerの下部に固定することで、コンテンツが少ししかない場合、div#footerは画面の下部に固定され(div#containerはmin-height:100%が設定されているため)、コンテンツの高さが画面の高さを超えるとdiv#footerもdiv#containerの下部に固定され、つまりページの下部に固定されます.div#footerに「width:100%」を追加して、ページ全体を延長することもできます.
CSSコード:
<body>
<div id="container">
<div id="header">Header Title</div>
<div id="page" class="clearfix">
<div id="left">Left Sider</div>
<div id="content">Main Content</div>
<div id="right">Right Sider</div>
</div>
<div id="footer">Footer Section</div>
</div>
</body>cssの場合:
1.reset:html、bodyのmargin、paddingを取り除く.さらにheightを100%に設定し、後でサブ要素のパーセントを設定しやすいようにします.
2.div#containerコンテナに「position:relative」を設定して、中の要素が絶対的に位置決めされた後にdiv#containerコンテナを走らないようにする必要があります.
3.div#pageこのコンテナには重要な設定があり、このコンテナにpadding-bottom値を設定する必要があります.この値はフッターdiv#footerの高さ(height)値に等しい(またはやや大きい)必要がありますが、ここではpadding-bottomの代わりにmargin-bottomを使用してはいけません.そうしないと効果が得られません.
4.div#footerコンテナ:div#footerコンテナはpx(またはem)の単位で一定の高さを設定する必要があります.div#footerはまた、絶対位置決めを行い、bottom:0を設定する必要がある.div#footerをコンテナdiv#containerの下部に固定することで、コンテンツが少ししかない場合、div#footerは画面の下部に固定され(div#containerはmin-height:100%が設定されているため)、コンテンツの高さが画面の高さを超えるとdiv#footerもdiv#containerの下部に固定され、つまりページの下部に固定されます.div#footerに「width:100%」を追加して、ページ全体を延長することもできます.
CSSコード:
html,body {
margin: 0;
padding:0;
height: 100%;
}
#container {
min-height:100%;
height: auto !important;
height: 100%; /*IE6 min-height*/
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#page {
width: 960px;
margin: 0 auto;
padding-bottom: 60px;/* footer */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;/* */
background: #6cf;
clear:both;
}
/*======= =======*/
#left {
width: 220px;
float: left;
margin-right: 20px;
background: lime;
}
#content {
background: orange;
float: left;
width: 480px;
margin-right: 20px;
}
#right{
background: green;
float: right;
width: 220px;
}