だから基本的に私は私のページの下部にフッターを貼り付けたいです
しかし、私のページのコンテンツは動的であるため、コンテンツが長い場合もあれば、短い場合もあります
グーグルで検索してたくさんの結果を見つけましたが、試してみると、コンテンツが短い場合でも機能しますが、コンテンツが長い場合は、ウィンドウの下部(ページではなく)に貼り付けられ、コンテンツと重なります
javascriptを使用するかどうかは関係ありませんが、純粋なCSSを使用している場合はより良いでしょう
だから基本的に私は私のページの下部にフッターを貼り付けたいです
しかし、私のページのコンテンツは動的であるため、コンテンツが長い場合もあれば、短い場合もあります
グーグルで検索してたくさんの結果を見つけましたが、試してみると、コンテンツが短い場合でも機能しますが、コンテンツが長い場合は、ウィンドウの下部(ページではなく)に貼り付けられ、コンテンツと重なります
javascriptを使用するかどうかは関係ありませんが、純粋なCSSを使用している場合はより良いでしょう
#footer{
position:fixed;
bottom:0;
height:200px;
}
body
{
min-height:100%;
padding-bottom:200px; /* same as footer height */
}
これは固定位置を使用しないため、常にビューポートの下部に表示されるとは限りません。
CSSはこちらから
これに関する議論もここで見ることができます
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
css ソリューションを見つけることができました (100% ではありません)
#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
以下のこのリンクで 固定CSSフッター
他のSO投稿も調べることができます