Question

我在网上搜索了关于粘性页脚的答案，并找到了我的问题的部分答案。我已经在我的页脚包装器上放置了一个固定位置，以便重新调整浏览器屏幕大小，页脚始终粘在底部。这适用于大屏幕，但是一旦屏幕变小，页脚就会在包装内容区域后面。请问，有人可以告诉我如何应用这个粘性页脚，以便它清除包装和内容区域？请参阅以下代码

HTML CODE：

<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的保证金最高值之后，页脚开始粘贴。

我非常感谢对此提供任何帮助!!

Answer 1

<强> HTML

   <div id="wrapper">
      <p>lots of content</p>
   </div>
   <div class="stickyFooter">
      <p>Content for sticky footer</p>
   </div>

<强> CSS

.stickyFooter {
     position: fixed;
     bottom: 0px;
     width: 100%;
     overflow: visible;
     z-index: 99;
     padding-top: 5px;
     padding-bottom: 3px;
     background: white;
     border-top: solid white 2px;
     background-color: #89D4DF;
     -webkit-box-shadow: 0px -5px 15px 0px #bfbfbf;
     box-shadow: 0px -5px 15px 0px #bfbfbf;
     height: 34px;
}

粘性页脚需要清除包装内容

1 个答案: