CSSフッタがページの下部にくっついていない

Question

CSSレイアウトで固定フッタを設定する際にいくつかの問題があります。私はhttp://www.cssstickyfooter.com/からアイディアを出してみようとしていますが、divの内容が十分に高くない場合は、ページの下部にフッターが残りません。

CSSファイル：

* { 
margin:0; 
padding:0; 
} 

body { 
height:100%; 
margin:0px; 
padding:0px; 
} 

#wrap { 
min-height: 100%; 
} 

#container { 
overflow:auto; 
padding-bottom: 150px; 
text-align:left; 
width:800px; 
margin:auto; 
} 

#header { 
height:240px; 
margin-top:20px; 
} 

#navigation { 
float:left; 
width:800px; 
margin-top:20px; 
} 

#content-container { 
float:left; 
width: 800px; 
} 

#left { 
clear:left; 
float:left: 
width:480px; 
height: auto; 
margin: 20px 0px 20px 0px; 
padding: 20px 10px 20px 10px; 
} 

#right { 
float:right; 
width:275px; 
height:auto; 
margin: 20px 0px 20px 0px; 
padding: 20px 10px 20px 10px; 
} 

#footer { 
position: relative; 
clear:both; 
height:150px; 
margin-top: -150px; 
} 

#columns { 
width:800px; 
height:150px; 
margin:auto; 
} 

#colleft { 
float:left; 
width:400px; 
height:150px; 
} 

#colright { 
float:right; 
position:relative; 
width:260px; 
height:150px; 
} 

htmlファイル：

<div id="wrap"> 

    <div id="container"> 

     <div id="header"></div> 

     <div id="navigation"> 

      <div id="lang"></div> 

     </div> 

     <div id="content-container"> 

      <div id="left"></div> 

      <div id="right"></div> 

     </div> 

    </div> 

    <div id="footer"> 

     <div id="columns"> 

      <div id="colleft"></div> 

      <div id="colright"></div> 

     </div> 
</div> 

Answer 1

私はあなたがあなたのCSSから

html { height: 100%; }

が欠落していると信じています。

Answer 2

位置の使用を考慮しましたか？固定ですか？あなたの#footerが#footerはラップの外でなければならないCSSを使用して、#wrap内にあるので、それは最小の高さを設定しているラップであるよう

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

あなたの例が動作しない理由は、あります〜100％、#footerは負のマージンを使用して上に引き上げられています。

htmlタグの高さも100％必要です。

したがって、#footerはネストできません。また、htmlにはheight：100％が必要です。

ここで例--- http://jsfiddle.net/CK6nt/

役に立てば幸い！あなたのフッターのクラスでローリー

Answer 3

：

#footer { 
position: relative; 
clear:both; 
height:150px; 
margin-top: -150px; 
} 

変更position: relative;position:fixedにとてもクラスは次のようになります。

#footer { 
position: fixed; 
clear:both; 
height:150px; 
margin-top: -150px; 
} 

Answer 4

は、別のアプローチを選択する必要があるかもしれませ。私はこの方法を使用して、フッターを底に貼り付けますStick Footer to bottom with help of CSS3。現代のブラウザでのみ機能します）他の人にとっては、「優雅な劣化」が働いても、コンテンツは引き続きアクセス可能です。