Question

我一直在各种各样的页面上尝试粘滞代码，而最接近的代码让我的网页看起来不太合适，那将是cssstickyfooter。

几个月前我开始了一个项目，我打算为邻居的女儿生产。我需要在我的大学课程中为模块创建一个网站，这个想法是由新业务所有者的父亲带给我的。所以我制作了这个网站并将它提交给了我的讲师（很多视觉上的错误以及许多无用的代码）：Irish Baubles website

我目前遇到的主要问题是页脚在页面的一半处被卡住了（例如，请参阅“商家”页面）。我一直对它很不耐烦，并尝试使用ryan fait的代码布局，但它没有那么好用。

我现在已将内容推出，页脚位于屏幕底部。我的朋友也建议以固定的位置进行，但内容不会在页脚后面跟进。

我还从业务页面，样板文件和流体布局中粘贴了新代码的页面。

如果我说清楚：两者都在#main css规则下，它会重新引入内容，但页脚仍然太高。

我只是以此页面为例开始，然后以其他方式完成工作。

任何帮助都会很棒！谢谢！

Answer 1

使用（我发现的）的最佳方法是使用Ryan Fait解决方案来粘贴页脚。除了页脚之外，它将包装所有内容以使其始终位于底部。

HTML

<html>
    <head>
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

CSS

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -4em;
}
.footer, .push {
  height: 4em;
}

这是一个JSFiddle示例。 http://jsfiddle.net/EyrKy/3/

已更新：以下是您的布局http://jsfiddle.net/EyrKy/4/

的示例

我希望这会有所帮助。

如何使用响应式布局的粘性页脚代码？

1 个答案: