1

だから基本的に私は私のページの下部にフッターを貼り付けたいです

しかし、私のページのコンテンツは動的であるため、コンテンツが長い場合もあれば、短い場合もあります

グーグルで検索してたくさんの結果を見つけましたが、試してみると、コンテンツが短い場合でも機能しますが、コンテンツが長い場合は、ウィンドウの下部(ページではなく)に貼り付けられ、コンテンツと重なります

javascriptを使用するかどうかは関係ありませんが、純粋なCSSを使用している場合はより良いでしょう

4

3 に答える 3

2
#footer{
    position:fixed; 
    bottom:0;
    height:200px;
}

body
{
    min-height:100%;
    padding-bottom:200px; /* same as footer height */
}
于 2013-01-06T05:09:59.443 に答える
1

これは固定位置を使用しないため、常にビューポートの下部に表示されるとは限りません。

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/

*/
于 2013-01-06T05:17:04.833 に答える
0

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投稿も調べることができます

フッターの位置は下と中央

ページにフッターを固定する方法

于 2013-01-06T05:11:18.527 に答える