为什么我的页脚会这样表现? - 固定内容,非固定bg

时间:2015-04-11 20:22:43

标签: html5 css3 footer

我有一个php网站从功能中拉出它的页眉和页脚,一切正常 - 除了页脚显示。我附上了相关的代码和用于审核的URL。任何帮助让页脚保持连接到底部并将内容放在页脚部分的容器内(左外侧,左内侧,右侧内侧,右侧外侧和底部(页脚小)。

html部分:

<?php
function displayFooter() {
?>
</div>
<footer>
    <div class="navbar navbar-fixed-bottom footer">
        <div class="container-fluid">
            <div class="row-fluid"> 
                <div class="col-xs-6 col-md-4 col-lg-3">
                     <ul>
                    <li><a href="news.php">News</a></li>
                    <li><a href="press.php">Press</a></li>
                    <li><a href="contactus.php">Contact Us</a></li>
                    <li><a href="privacy.php">Privacy</a></li>
                    <li><a href="terms.php">Terms Of Use</a></li>
                     </ul>
                </div>
                <div class="col-xs-6 col-md-4 col-lg-3">
                    <h2 class="twitterfooter">Tweets</h2>
                    <!-- TODO - ADD FOOTER APP FOR RECENT TWEETS HERE -->
                </div>
                <div class="col-xs-6 col-md-4 col-lg-3">
                   <h2>We Accept</h2>
                     <ul class="payment-logos">
                        <li class="visa">Visa</li>
                        <li class="mc">Mastercard</li>
                        <li class="disc">Discover</li>
                        <li class="amex">AMEX</li>
                    </ul>
                  </div>
                <div class="col-xs-6 col-md-4 col-lg-3">
                   <div id="newsletter">
                       TODO - add newsletter integration
                   </div>
               </div>
             </div>
           </div>
 <small>Copyright &copy; <?php echo date('o')?> Information Security     Education. All Rights Reserved. <span> Website Engineered by <a     href="www.steelcitydev.com"><img src="/dev/ise/images/scd.png" alt="Steel     City Developers, llc" width="32" height="12"/></a></span></small>
</div>
</footer>

这是相关的css:

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 355px;
  background: url(/dev/ise/images/footer-bg.png); 
  background-repeat: repeat;
}

footer span {
  background: rgba(34, 34, 34, 1); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(34, 34, 34, 1) 0%, rgba(71, 71, 71, 1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(34, 34, 34, 1)), color-stop(100%,rgba(71, 71, 71, 1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(34, 34, 34, 1) 0%,rgba(71, 71, 71, 1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(34, 34, 34, 1) 0%,rgba(71, 71, 71, 1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(34, 34, 34, 1) 0%,rgba(71, 71, 71, 1) 100%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(34, 34, 34, 1) 0%,rgba(71, 71, 71, 1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(34, 34, 34, 1)', endColorstr='rgba(71, 71, 71, 1)',GradientType=0 ); /* IE6-9 */
  width: 100%;
  left: 0;
  bottom: 0;
  position: absolute;
  height: 70px;
  border-top: 3px solid rgba(79, 79, 79, 1);
}

,dev url为http://steelcitydevstudios.com/dev/ise/login.php

我真的需要将页脚内的内容粘贴在页脚上 - 现在页脚背景(不小)将随页面一起上下滑动(当我向上/向下滚动时)。我希望它能让您在页面底部看到页脚(如果有相关内容可以这样做),当您滚动时,您将能够查看整个页脚和内容。

先谢谢你们,我有点坚持这个。

0 个答案:

没有答案