1. ホーム
  2. 質問と答え
  3. facebookアプリケーションデザインのような固定フッタを得るにはどうすればいいですか？

facebookアプリケーションデザインのような固定フッタを得るにはどうすればいいですか？

2009-03-23 14 views
1

facebookアプリケーションデザインのような固定フッタを作るにはどうしたらいいですか？ CSSを使った例が分かりました。facebookアプリケーションデザインのような固定フッタを得るにはどうすればいいですか？

Facebook like status div

出典

2009-03-23 Anonymous

+1

一部の人々は英語の巨大なコマンドを持っていないかもしれません。英語は少し曖昧で、母国語以外の方には聞き取りにくいです。 –

+0

これは前にここで尋ねられています。次回に検索してください... –

答えて

7

一つの方法は、hereを与えているの重複：HTMLで

：CSSで

<div id="container"> 
    <div id="content"></div> 
    <div id="footer"></div> 
</div>

：

#container { 
    position:absolute; 
    min-height:100%; 
} 

#content { 
    margin-bottom:100px; /* same as footer height */ 
} 

#footer { 
    position:absolute; 
    bottom:0; 
    height:100px; /* same as content margin-bottom */ 
}

編集：そのリンクがオンに基づいていましたthisにはいくつかの例外があります

出典

2009-03-23 13:39:43

+0

ありがとうございました –

+0

これはIEではうまくいかないと思います。 –

3

Facebookのフッターは、スクロールするときにそのまま残ります。これを実現するには、次のようなHTMLが必要になります：

このような 
<body> 
    <div id="content"> 
    [content] 
    </div> 
    <div id="footer"> 
    [footer] 
    </div> 
</body>

とCSSは：

#footer { 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    background: #f00; 
}

CSS position: fixedは、この要素の位置に関係なく、スクロールの固定維持するためにブラウザに指示します。

出典

2009-03-23 14:06:57

関連する問題

 関連する問題