100％高さのコンテンツコンテナ付きの粘着性CSSフッタ。

Question

私はスティッキーフッターのためにこの技術を使用しています：http://ryanfait.com/sticky-footer/

私もフッターをカプセル化しますが、ページ全体の周りに渡した私のサイト全体の周りに境界線を作成したいが、これで終わった：http://i.imgur.com/jy9vN.jpg

白いボックスがどのようにフッターに移動していないかに注目してください。ここで

は、この問題を示すjsfiddleです：http://jsfiddle.net/hc3Xu/14/

は*私は以前、それはフッターだったと私はそれが高さであることを私に言って答えを得実現していない同様の質問をした：！オート重要。 contentcontainerが100％に伸びていない原因となっていたコンテナクラスにただし、それを削除すると、フッターがページの下部に設定されていない問題が発生します。だから私はどのように進めるのか分からない。

Answer 1

の代わりに：

.container {min-height:100%; height: auto !important; height:100%; 
      margin: 0 auto -30px; width:980px; 
      background:URL(images/bg_sides.jpg) repeat-y #f4f4f4;} 

ような何かしてみてください：あなたは、その後もあなたのcontentContainerのdivに沿ってそれを持って来るためにフッターの左と上の余白を調整する必要があります

.container {min-height:100%; height: auto !important; 
      margin: 0 auto -30px; width:980px; 
      box-shadow: inset #f4f4f4 0 0 0 20px, #BDBDBD 0 0 3px 3px; 
      -webkit-box-shadow: inset #f4f4f4 0 0 0 20px, #BDBDBD 0 0 3px 3px; 
      -moz-box-shadow: inset #f4f4f4 0 0 0 20px, #BDBDBD 0 0 3px 3px;} 

を。

http://jsfiddle.net/z5geM/

Answer 2

http://jsfiddle.net/hc3Xu/16/

私はあなたのhtml要素に背景画像を持っているとbodyがメイン、中心のコンテンツ領域であると要素を少し変更しました。境界線を与え、ボックスサイズを変更することによって、100％の高さを維持しながら、外側に灰色の境界線を作成します。フッターの位置をわずかに微調整して20ピクセルほど下に移動させると、ボディの灰色の境界領域内に一列に並びます。

これがうまくいかなければならない理由について、より詳細な説明が必要な場合はお知らせください。