1

我试图将页脚保持在页面底部。我尝试的第一种方法是，页脚将位于页面底部上方，并且会显示背景。这是与 position:static; （如下图）

图像在这里

我尝试的第二种方法是使用绝对页脚。这会将页脚放在没有足够内容滚动的页面底部，但在有滚动的页面上，它在加载时位于窗口底部并位于内容顶部。它不是底部页。

这是我当前的代码：

<div id="container">
    <div id="content">
        <div id="slideshow"></div>
        <div id="clear"></div>
        <div id="boxes">
            <div id="box">
                <div id="boxheader"></div>
                <div id="box1" class="box"></div>
            </div>
            <div id="box">
                <div id="boxheader"></div>
                <div id="box2" class="box"></div>
            </div>
            <div id="box">
                <div id="boxheader"></div>
                <div id="box3" class="box"></div>
            </div>
        </div>
        <div id="clear"></div>
    </div>
</div>
<div id="footer">Content</div>

这是CSS

div#container{
  position:relative;
  margin: 4px;
}
#boxes{
  width: 960px;
  margin: 50px auto 0px auto;
}
#footer {
  clear: both;
  margin-top: 50px;
  bottom: 0;
  left: 0;
  height: 200px;
  background-color: #fff;
  width: 100%;
}

如果您需要任何其他信息，请告诉我。

4

2 回答 2

0

放

html, body { height: 100%; }

将页脚之前的全部内容包装在 div 中。

.wrapper { height:auto !important; min-height:100%; }

您可以根据要在浏览器窗口底部显示的页脚量来调整最小高度。如果将其设置为 90%，则在滚动之前将显示 10% 的页脚。

所以在你的例子中

<body style="height: 100%"> <div id="container" style="min-height: 90%; height: auto !important;"> <div id="content"> <div id="slideshow"></div> <div id="clear"></div> <div id="boxes"> <div id="box"> <div id="boxheader"></div> <div id="box1" class="box"></div> </div> <div id="box"> <div id="boxheader"></div> <div id="box2" class="box"></div> </div> <div id="box"> <div id="boxheader"></div> <div id="box3" class="box"></div> </div> </div> <div id="clear"></div> </div> </div> <div id="footer">Content</div>

于 2014-08-12T14:22:24.987 回答
-1

我已经多次使用下面喜欢的文章中描述的方法，并且没有遇到任何问题：

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

希望能帮助到你！

于 2013-02-05T03:31:55.513 回答