0

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

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>

代码：

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

0

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;
}
于 2013-09-16T14:05:14.397 回答