メインラッパーのマージントップのCSSスティッキーフッタ

Question

私はhttp://ryanfait.com/sticky-footer/を使用していましたが、ページの上部に余白/パディングが必要になるまで機能します。私が扱っているデザインはパターン化されたボディーを持ち、すべてのページコンテンツは上から15pxから始まる白いボックスに入っています。私はまだボトムクロスブラウザに貼り付けるフッターが必要です。何か案は？

UPDATE：すべてのアイデアを

おかげではなく、完全な作品を指摘しました。作業例：非nessaryスクロールバーでラッパープットのサブ要素にマージンを追加するhttp://jsfiddle.net/cronoklee/p2cPD/

Answer 1

あなたが使用している固定フッターを解凍している場合は、最初から作成する方法について説明します。クロスブラウザを動作するはずです

HTML

<div class="wrapper"> 
    <div class="content"> 
     ... Your Content Here ... 
    </div> 
</div> 
<div class="footer"> 
    ... Your Footer Here ... 
</div> 

CSS

.wrapper { 
    background: #eee; 
    padding: 15px 0 100px; 
} 

.content { 
    background: #fff; 
} 

.footer { 
    background: #ccc; 
    bottom: 0; 
    height: 100px; 
    left: 0; 
    position: fixed; 
    right: 0; 
} 

。これについての唯一のニュアンスは、position: fixedがIE 6では動作しないことです。いずれの改善も歓迎です。

Answer 2

を使用すると、身体に余裕トップを適用してもらえますか？

body{ 
margin-top:15px; 
} 

これは、リンク先のページのFirebugで機能します。

Answer 3

解決策はスクロールバーを追加せずにです。私は10分前に同じ問題があったので、

.header{ 
height:168px; /*15px + image height*/ 
image-position:bottom; 
margin-bottom:37px; 
} 

.download{ 
top:175px; 
} 

Answer 4

まあ、私はちょうどこのスレッドを発見し、私は、垂直ダウンによって引き起こされる「不要なスクロールバーでの問題に私の解決策を共有したい：これらの調整を行います私がその間に思いついた "ページの一番上から20pxにしたいので、margin-top：20pxの私のheader-divに起因するフッタのフッタ。

ちょうど.content{margin-top:15px;}を.content{padding-top:15px;}に変更しても問題ありません。スクロールバーが消え、コンテンツの上部からの距離が離れます。

ここに見られるように：http://jsfiddle.net/p2cPD/24/

はい - それはコンテンツのdivの背景を拡大していきますが、あなたがそれをしたくない場合は、それはいくつかの並べ替えまたは任意のいくつかの透過PNGを使用することによって解決することができます。

また、http://ryanfait.comによると、内容はcontent-div内ではなく、wrapper-div内とcontent-div内の最後にある必要があります。