0

目标：我想根据许多因素定位页脚。在这里能找到它

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

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

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

其他信息---->#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 进行更改。非常感谢！

4

4 回答 4

0

尝试像这样定义你的页面容器：height:100%; 位置：相对；

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

于 2010-07-01T13:57:54.390 回答
0 
 <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/ ​</p>

于 2010-06-30T09:28:28.363 回答
0

查看这 5 种不同的解决方案并选择最适合您的解决方案

1到4可以在这里找到

另一个在这里

于 2010-06-30T09:44:50.647 回答
0

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

于 2010-06-30T09:53:22.017 回答