0

スティッキー フッターに関する回答を Web で検索したところ、私の質問に対する部分的な回答が見つかりました。フッター ラッパーに固定位置を配置して、ブラウザー画面のサイズが変更されると、フッターが常に下部に固定されるようにしました。これは大きな画面ではうまく機能しますが、画面が小さくなるとすぐにフッターがラッパー コンテンツ領域の後ろに表示されます。この粘着性のあるフッターを適用して、ラッパーとコンテンツ領域をクリアする方法を誰か教えてください。次のコードを参照してください

HTML コード:

<html>
<body>
<div id="master-wrapper">    
<div class="wrapper">

<div class="main-content clearfix">

<div class="can-wrapper">
<div class="can-img"></div><!-- end .can-img -->
</div><!-- end .can-wrapper -->

</div><!-- end .main-content -->


</div><!-- end .wrapper -->
<div class="footer-wrapper">
<footer>
</footer>
</div><!-- end .footer-wrapper -->

</div><!-- end #master-wrapper -->
</body>
</html>

CSS コード:

html {height:100%;}

body {
margin:0px;
padding:0px;
top:0;
width:100%;
height:auto;
min-height: 100%;
min-width: 100%;
    }

#master-wrapper {overflow: hidden; position: relative; width: 100%; height:100%; min-height:100% }
.wrapper {margin:196px auto -4em; position: relative; width: 950px; padding:0px 20px 156px; min-height:100%; z-index:1;}

.footer-wrapper {position:fixed; margin-top:-139px; clear:both; bottom:0; width:100%; height:139px; background:#C0A18F;}
footer {margin:50px auto; width:950px; padding:0px;}

私が必要としているのは、約 800px(H) の後にフッターが固着し始めることです。これは、ほぼ 800px の margin-top 値です。

これについて何か助けていただければ幸いです!!

4

1 に答える 1