Question

我试图将页脚放在页面底部。我尝试它的第一种方式，页脚将位于页面底部上方，背景将显示。这是位置：静态; （如下图所示）

image goes here

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

这是我目前的代码：

<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%;
}

如果您需要任何其他信息，请与我们联系。

Answer 1

设置

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>

Answer 2

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

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

希望它有所帮助！

页脚不在页面底部

2 个答案: