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

Question

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

1) 如果我的页面上没有内容(或者可能只有 1 或 2 行)，我想将页脚放在屏幕底部。 (无需向下滚动即可看到页脚 - 无滚动条)

2)如果我的页面内容太多，我的页脚必须相对放置在最后一行内容的下方。所以页脚应该根据内容调整它的位置。

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

Other INFO ----> #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/