css – 窗口底部的Div和适应性高度div

前端之家收集整理的这篇文章主要介绍了css – 窗口底部的Div和适应性高度div前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有没有办法让div总是在窗口的底部,另一个div来改变它的高度以填充它留下的任何空间,并且如果div的内容太长,div将滚动. (我从不希望窗口滚动).

最好通过图片说明:

div layout http://img401.imageshack.us/img401/3209/divs.png

绿色div总是将自己置于窗口的底部,橙色div将填补空白.当窗口较小时,如右图中,橙色div将更小并将滚动.

绿色div可以切换.有时绿色div将显示:none,然后橙色div将延伸到底部.当绿色div显示:再次阻止时,它将再次显示图片.

它必须在IE6中工作.

到目前为止,我可以通过以下方式获得绿色div:

position: absolute;
bottom: 0;

但我不知道如何让橙色div做我想做的事.

解决方法

你可以看看A List Apart的“探索页脚”,

http://www.alistapart.com/articles/footers/

希望能帮助到你,
思南

编辑:(纯CSS方式)

你的加价:

<div class="non-footer">Your content goes here.</div>
<div class="footer">Here is for footer content.</div>

你的CSS:

body,html,.non-footer {
    height: 100%;
    min-height: 100%;
    width: 100%;
}
.footer {
    height: 150px;
    margin-top: -150px;
    width: 100%;
}

我可能会遗漏一些细节,但这应该有效,它提供了技巧背后的基本想法.

思南.

猜你在找的CSS相关文章