页脚不在页面底部

我正在尝试将页脚保留在页面的底部。我尝试的第一种方法是，页脚将位于页面底部之上，背景将显示。这是与位置：静态; （如下面的图）页脚不在页面底部

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

请让我知道如果你需要任何额外的信息。

来源

2013-02-05 camden

也许这将帮助：http://stackoverflow.com/questions/13103910/create-footer-element-located-beneath-the-screen – Hope4You

有什么使用'position：fixed'错误？ –

@爆炸药丸，除非做一些“空气循环”，否则最终的脚部将覆盖部分的部位，没有滚动条可以隐藏隐藏的部分。 –

-1

我用过的文章中介绍的方法如下喜欢过很多次，都没有什么问题吧：

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

希望它能帮助！

来源

2013-02-05 03:31:55

设置

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-12 14:22:24 JacobSDK

页脚不在页面底部

回答

相关问题