Question

我正在建立一个新网站，我的页脚有点问题。我尝试了Ryan Fait（http://ryanfait.com/sticky-footer/）的技术，但不知怎的，它只是没有成功。也许你可以帮我，告诉我为什么？

我页面的链接是aev.martenzander.com

我只在index.php上尝试过，所以在访问子页面时不要混淆。

CODE：

HTML

<!-- FOOTER -->
<div class="stickyfooter"></div>
<div class="footer">
    <footer>
        <?php
        include("includes/footer.php"); ?>
    </footer>
</div>

CSS

.footer{
        height: 111px;
        margin: 0 auto;
        position: relative;
    }

.stickyfooter{
        min-height: 100%;
        height: auto !important;
        margin: 0 auto -111px;
    }

Answer 1

所以它的工作方式是你有一个带有设置负边距的mainWrapper类，然后你有一个推送类，它会强制该边距始终保持清晰，然后你有一个占用该边距的页脚类。

现在你没有推送类，你的页脚类在包装器中定义。它需要在包装器之外。

Answer 2

这是一个简单解决方案的链接：

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

HTML：

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

CSS：

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

CSS粘贴页脚麻烦

2 个答案: