Question

AIM ：我想根据很多因素来定位页脚。它可以在这里找到

1）如果页面上没有内容（或者可能是1行或2行），我想将页脚放在屏幕底部。（页脚可见而不向下滚动 - 没有滚动条）

2）如果我的页面中有这么多内容，我的页脚必须相对放在最后一行内容之下。因此，页脚应根据内容调整其位置。

注意：页脚必须在具有不同屏幕尺寸/分辨率的不同系统上保持一致...（上网本与屏幕尺寸不同于笔记本电脑）。

其他信息----＆gt; #footer所在的#footer_outer就在其中。

#frame {
    margin:0 auto;
    width:962px;
    margin-top:10px;
    height:auto;
}

#content {
    padding:5px 5px 5px 5px;
    margin:0 auto;
    width:890px;
    height:auto;
    min-height: 372px; /* i use this to have footer at the bottom of **my** screen when there is not much content. */
}

#footer_outer{
    width:100%;
    background:#444;
    padding:10px 0 0 0;
    height: 130px;
    position:relative;  /*to put footer_outer 50px below the content*/
    top: 50px;
    bottom:0px;
}

#footer {
    margin:0 auto;
    width:834px;
    height:auto;
    overflow:hidden;
}

请帮我改变这个CSS。非常感谢你！

Answer 1

 <style>
  #wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -100px; /* fix negative height */
  }
  #footer, #push {
    height: 100px; /* fix positive height */
    clear: both;
    background:#000;
  }
 </style>

<div id="wrapper">
  <p>content here.</p>
  <div id="push"></div>
</div>
<div id="footer">
  footer
</div>

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

Answer 2

结帐这5种不同的解决方案并为您挑选最佳

可以找到1到4 here

另一个here

Answer 3

由于内容的长度可变，我看不到使用JavaScript的任何其他方式，特别是如果您希望它对于不同的屏幕尺寸不同。您需要首先检查视口高度，然后检查#content的高度，并根据这些数字进行数学计算以适合您想要的页脚

Answer 4

尝试像这样定义页面容器：height：100％;位置：相对;

然后，在该容器内，放置页脚div宽度，位置：绝对;底部：0px;

CSS中的页脚问题...需要帮助

4 个答案: