ボトムにフッターがあり、ボディオーバーラップの内容が重ならない

-1

ボトムに貼り付けるスティッキーフッターがありますが、本体とフッタの重なりが問題です。ボトムにフッターがあり、ボディオーバーラップの内容が重ならない

現在、私のhtml、body、およびmainは高さ100％/ min-height：100％に設定されていますが、フッタは絶対的にleft：0とbottom：0に配置されています。私の背景イメージを私のメインの底に配置し、配置された絶対フッタにオーバーラップさせます。

私はフッタを絶対に配置せず、メインの高さを100％にしていましたが、うまくいきましたが、フッタを見るためにスクロールする必要があります。フッターを押し下げて、スクロールダウンする必要があるのはなぜですか？私はフッタをスクロールダウンしなくてもページの一番下に来たいと思っています。

<html> 
    <body> 
    <main> 
     <div>Contents here</div> 
    </main> 
    <footer/> 
    </body> 
</html> 


html, body, main { 
    height: 100%; 
} 
.content { 
    background-repeat: no-repeat; 
    background-position-y: 100%; 
    background-position-x: center; 
    background-size: 1000px; 
}

出典

2017-12-04 henhen

。私はそれが絶対にpositonedを持っていないとき、それは底にマッチし、マージンの底は必要ではないが、私はフッターを見るために下にスクロールする必要があります。フッタが私のブラウザの高さを超えてしまう理由は分かりません。 – henhen

これは機能するスティッキーフッターコードです。このレイアウトを使用して問題を解決することができます。それは絶対に配置されたときに動作するようには思えない

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
.content { 
 
    padding: 20px; 
 
    min-height: 100%; 
 
    margin: 0 auto -50px; 
 
} 
 
.footer, 
 
.push { 
 
    height: 50px; 
 
}

<div class="content"> 
 
    <h1>Sticky Footer with Negative Margin 1</h1> 
 
    <p><button id="add">Add Content</button></p> 
 
    <div class="push"></div> 
 
</div> 
 

 
<footer class="footer"> 
 
    Footer 
 
</footer>

出典

2017-12-04 23:43:55

私のコンテンツに設定した私の背景イメージは、フッターとまだ重なっています。元の投稿に自分の背景画像のCSSを追加しました – henhen

try：ブロック –

divのブロックを表示しますか？私はdivがデフォルトでブロックされていると思った – henhen

ボトムにフッターがあり、ボディオーバーラップの内容が重ならない

答えて

関連する問題