CSSバックグラウンドの高い位置のフッタの後ろ

画面の下部に黒い背景を塗りつぶした高さのフッターdivがボディの上にあります。いくつかのページがあり、多くのコンテンツはありません。フッタがページを上がり、高さが固定されているため、フッタの下にボディのBGイメージが表示されます。 CSSを使用して、フッターのdivの高さを設定する必要はありません。CSSバックグラウンドの高い位置のフッタの後ろ

出典

2012-04-25 Nick

いくつかのコードが表示されますか？ – Jakub

コードが多すぎます.. heres a link： http://projects.snowshtechnologies.com/golden _dragon/profiles/ – Nick

あなたは内容が少しではあるが。だからは、フッタはsame.Sinceコンテンツ領域になりますのページへの「最小高さ」を与えることができ

はあなたがhereで見ることができ

「分の高さ」を持っています"min-height"の場合

ここにサンプルコードがあります。

.content { 
    min-height: 600px; 
}

出典

2012-04-25 19:43:25

これは、画面解像度を特定するためにいくつかのJSが必要になります....画面の下部に塗りつぶす方法が必要です。後で – Nick

公開されている解決策がいくつかあります。それらのすべてのコアは、すべての非フッターコンテンツをラップし、フッターの高さに等しいパディングを持つブロックレベルの要素に対して、最小の高さ（IEの以前のバージョンのハックを含む）を適用しているようです。フッターは、その高さとラッパーの下のパディングと同じ値に（明示的に設定された負の上マージンを持って

コード例the CSS Sticky Footer solutionから

HTML：。。

<body> 
    <!--[if !IE 7]> 
     <style type="text/css"> 
      #wrap {display:table;height:100%} 
     </style> 
    <![endif]--> 

    <div id="wrap"> 
     <div id="main"> 
     </div> 
    </div> 

    <div id="footer"> 
    </div> 
</body>

CSS：

html, body {height: 100%;} 

#wrap {min-height: 100%;} 

#main {overflow:auto; 
    padding-bottom: 150px;} /* must be same height as the footer */ 

#footer {position: relative; 
    margin-top: -150px; /* negative value of footer height */ 
    height: 150px; 
    clear:both;} 

/*Opera Fix*/ 
body:before { 
    content:""; 
    height:100%; 
    float:left; 
    width:0; 
    margin-top:-32767px;/ 
}

出典

2012-04-25 19:45:41 devstruck

のフッタを貼り付けようとしていないのですが、その代わりに私たちは高い位置に移動するのがうれしいですが、フッターの下の背景は黒く塗る必要があります。 – Nick

CSSバックグラウンドの高い位置のフッタの後ろ

答えて

関連する問題