2

我一直在尝试各种页面上的粘滞代码，最接近让我的页面看起来不错的代码是 cssstickyfooter。

几个月前我开始了一个项目，打算为邻居的女儿制作。我需要为我的大学课程中的一个模块创建一个网站，这个想法是由一家新企业所有者的父亲带给我的。所以我制作了这个网站并将其提交给我的讲师（很多视觉错误，也许还有很多无用的代码）。：爱尔兰小玩意网站

我目前遇到的主要问题是页脚被卡在页面的一半（例如，请参阅业务页面）。我对此相当不耐烦，并尝试使用 ryan fait 的代码布局，但效果不佳。

我现在已经推出了内容和屏幕底部的页脚。我的朋友还建议使用固定位置进行操作，但内容不会跟在页脚后面。

我还粘贴了来自业务页面、样板和流体布局的新代码页面。

如果我明确表示：都在#main css 规则下，它会将内容带回，但页脚仍然太高。

我只是以这个页面为例来开始，然后逐步完成其余的工作。

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

4

1 回答 1

2

最好的使用方法（我发现）是将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/

我希望这有帮助。

于 2012-12-15T21:50:32.053 回答