HTML、CSS - スティッキーフッターのコンテンツを表示オーバー画面上

のサイズを変更することを目的として、ビューポートの終わりにHTML、CSS - スティッキーフッターのコンテンツを表示オーバー画面上

私のフッターを表示[削除]私のサイトを参照してください。

画面のサイズを垂直方向に変更すると、フッターはその上に重なって表示されます。

これをどのように回避できますか？

2012-04-25 Sean Zulu

this sticky footer tutorialをご覧ください。次のコードは、必要なだけのものでなければなりません。

* { 
    margin: 0; 
} 
html, body { 
    height: 100%; 
} 
.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */ 
} 
.footer, .push { 
    height: 142px; /* .push must be the same height as .footer */ 
} 

/* 

Sticky Footer by Ryan Fait 
http://ryanfait.com/ 

*/

編集：あなたのラッパーで

あなたの負の値はフッターの高さと一致していません。それはあなたの問題の最も可能性の高い部分です。

#wrapper { 
    min-height: 100%; 
    min-width: 450px; 
    height: auto !important; 
    height: 100%; 
    /* your old code: margin: 0 auto -4em;*/ 
    margin: 0 auto -83px; 
} 

footer {  
    background: url('images/foot_bg.jpg') center no-repeat, 
    url('images/foot_liq_bg.jpg') repeat; 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:83px; 
    min-width: 450px; 
}

編集：

あなたは高さがhtmlと体に100％に設定されていません。したがって、ボディはブラウザの100％ではない親（html）の100％にのみ設定されます。 htmlの高さを100％に設定する必要があります。

出典

2012-04-25 16:07:22

こんにちは、私はこのチュートリアルに従っていますが、動作しません。 http://www.vault-x.com/index_1.html –

ボディにのみ高さ：100％を追加しました。これはhtmlにも追加されているはずです。これが原因でない場合は、空のCSSファイルから開始し、固定フッターが機能するために必要なものだけを追加することができます。それから、あなたがそれを壊していないことを確認し続ける追加のCSSを追加するためにそこから作業してください。 –

ありがとうございました。 –

絶対的な位置付けを与えているので重複しています。他のコンテンツと相対的な位置付けをする必要があります。メインコンテンツをページの100％の高さにして、フッターを下に置きます。フッターに負のマージンを適用します。これは高さと同じピクセル数です。

フッターはheight:100px;使用margin-top:-100px;

ソースの場合：CSS Sticky Footer

出典

2012-04-25 16:12:28

、ショーンを心配しないでください。あなたはそれを働かせることからあまり離れていません。

body要素でpadding-bottomからmargin-bottomに変更し、絶対位置をfooter要素から外す必要があります。また、この方法をスティッキーフッタに適用するには、 'push' divを追加する必要があります。役立つはず

これjsFiddleは、それが私の作品：http://jsfiddle.net/4vunq/

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Vault-X</title> 
<!--JS enabling IE <=8 to recognise HTML5 elements--> 
    <script type="text/javascript"> 
    document.createElement ('header') 
    document.createElement ('footer') 
    </script> 
    <script type="text/javascript" src="javascript.js"></script> 
    <link href="style_01.css" title="one" rel="stylesheet" type="text/css"> 
</head> 
<body> 
    <div id="switchoff"> 
     <div id="wrapper"> 
      <header></header> 
      <div id="switch"> 
       <a href="#" onClick="lightSwitch();"> 
        <img src="http://www.vault-x.com/images/switch.jpg"> 
       </a> 
      </div> 
      <div id="content"><p class="switch">Hello World</p></div> 
      <div class='push'></div> 
     </div> 
     <footer></footer> 
    </div> 
</body> 
</html>

関連するCSS：あなたはpadding-bottom代わりのmargin-bottomを持っていた。ここ

* { 
    margin: 0; 
} 
html, body { 
    height: 100%; 
} 
footer, .push { 
    height: 83px; /* .push must be the same height as "footer" */ 
}

：

body { 
    background:url('http://www.vault-x.com/images/body_bg.jpg') repeat-x; 
    background-color: #000; 
    margin-bottom:83px; 
}

下マージンはあまりにもここで重要なのは：

#wrapper { 
    min-height: 100%; 
    min-width: 450px; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -83px; /* bottom margin is negative value of footer's height */ 
}

そして、あなたのフッターコード：ちょうど約それを行う必要があります

footer { 
background: url('http://www.vault-x.com/images/foot_bg.jpg') center no-repeat, 
url('http://www.vault-x.com/images/foot_liq_bg.jpg') repeat;; 
     width:100%; 
     height:83px; 
     min-width: 450px; 
}

。ニースサイトを見て、そして成功を祈る！ :)

出典

2012-04-25 17:43:10 InterfaceGuy

私はクリアを追加しました：どちらも重複して私の問題を解決しました。

#footer { 
     position:relative; 
     width:100%; 
     height: 200px; 
     background-color:#7B7168; 
     margin-top: -200px; 
     padding-bottom:50px; 
     clear:both; 
     }

出典

2015-10-07 14:44:29 FloatingPC

HTML、CSS - スティッキーフッターのコンテンツを表示オーバー画面上

答えて

関連する問題