我试图让我的页脚(只有一个带有一行文本的div)位于屏幕的底部,如果内容不是一直到底部,或者是在内容的底部,如果内容需要滚动条.如果内容不需要滚动条,则它可以很好地工作,但是当内容太长时,页脚仍然位于同一位置,位于内容的顶部.
我的基本div结构是:
<div id="container">
<div id="body"></div>
<div id="footer"></div>
</div>
我相应的CSS(有点剥离):
body {
margin: 0;
padding: 0;
height: 100%;
}
html {
margin: 0;
padding: 0;
height: 100%;
}
#container {
width: 674px;
min-height: 100%;
height: 100%;
position: relative;
margin: 0 auto;
}
#body {
width: 616px;
padding: 5px 14px 5px 14px;
margin: 0 auto;
padding-bottom: 20px;
}
#footer {
position: absolute;
bottom: 0;
width: 644px;
height: 20px;
margin: 0 auto;
}
我在这里有一个非常简单的启动页面:http://iph0wnz.com
它的主图形位于中间,其次是我的'a'.右下方的徽标.我希望该徽标与整个页面的右下角对齐,这意味着如果页面中有很多文本内容,它会显示在所有内容之后(即它不会悬停在顶部),但是如果内容较少 - 就像现在一样 - 然后它应该与屏幕的最底部对齐,而不是在内容之后.
我将尝试给出一个文本示例,就像我在如何将div的内容对齐到底部一样？:
-----------------------------
| less content, no scroll |
| |
| |
| |
| a. |
----------------------------- (screen height)
和
-----------------------------
| more content, yes scroll |
| the quick brown fox jump- |
| ped over the lazy dog an- |
| d she sells sea shells on |
| the sea shore and some o- |
| ther random text is put …
- "bodyDiv"高度必须是:100%(window.innerWidth less？px).
- "a"和"b"的高度必须是:50%(body.div.height less？px).
<HTML>
<body>
<div id="headerDiv" style="height:?px">fixed height</div>
<div id="bodyDiv" style="height:100%">flexible height
<div id="a" style="height:50%">flexible height</div>
<div id="x" style="height:?px">fixed height</div>
<div id="b" style="height:50%">flexible height</div>
...
</div>
</body>
<HTML>
它已经在JavaScript中完全解决了,但它在页面加载和调整大小事件上看起来很糟糕,因为它太慢了,即使我已经尽力优化它以提高速度.
CSS表达式也不是一个选项,因为据我所知,无论如何都将限制在IE 5-7.
因此,在花了3天试图通过使用负利润和正利润的任意组合来解决这个问题之后,我终于不得不承认最终要求公众帮助的失败.