絶対位置divがメインのコンテンツ

私は絶対に次のコードを使用して、ブラウザウィンドウの下部にフッターを配置しています上に浮い：絶対位置divがメインのコンテンツ

HTMLを

<html> 
    <body> 
     <div id="content"> 
      Content 
     </div> 
     <div id="footer"> 
      Footer 
     </div> 
    </body> 
</html>

CSS

#content { 
    margin-bottom: 20px; 
    background: red; 
} 

#footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 20px; 
    background: blue; 
}

これは意図したとおりに動作しますが、ブラウザのウィンドウを小さくすると、フッターはevになります主に内容をカバーしています。これを防ぐ最も効率的な方法は何ですか？

ありがとうございます。

出典

2011-12-05 Jonathan

なぜフッターに絶対配置を使用する必要がありますか？ – mc10

@ mc10私はフッタをブラウザウィンドウの下部に「スティック」したいので絶対的な配置を使用しています。 – Jonathan

'＃content'に' z-index'を追加するのはどうですか？ – mc10

おそらく、スティッキーフッターを使用したい：http://www.cssstickyfooter.com/

出典

2011-12-05 03:17:21

はこれを試してみてください：

#content { 
    padding-bottom: 20px; 
    background: red; 
} 

#footer { 
    position:fixed; //Changed to fixed 
    bottom:0px; 
    width:100%; 
    height: 20px; 
}

出典

2011-12-05 03:06:15 Jon

ありがとうございます。私はしかし、これを動作させることができませんでした：http://jsfiddle.net/2Afs6/ – Jonathan

あなたはSticky Footerを必要としています。ここ

Demo

擬似要素を用いanother exampleあります。古いバージョンのIEにはいくつかの問題があるかもしれませんが、意味のない要素は省くことができます。

出典

2011-12-05 03:18:32 bookcasey

絶対位置divがメインのコンテンツ

答えて

関連する問題