窗口底部的Div和适应性高度div [英] Div at bottom of window and adaptable height div

问题描述

有一种方法可以让div总是在窗口的底部，另一个div可以改变它的高度以填充它离开的任何空间，如果div的内容太长，div将滚动。 （我从来不想要窗口滚动）。

Is there a way to get a div to always be at the bottom of the window, and another div to change its height to fill any space that it leaves, and that div will scroll if its content is too long. (I never want the window to scroll).

这是最好的图片说明：

绿色div将始终在窗口的底部，橙色的div将填补空白。当窗口较小时，如右图所示，橙色div将变小，并且将滚动。

The green div will always put itself at the bottom of the window, and the orange div will fill the gap. When the window is smaller, like in the right hand image, the orange div will be smaller and will scroll.

绿色div可以切换。有时绿色div将有 display：none ，然后橙色div将拉伸到底部。当绿色div再次 display：block 时，它将再次显示为图片。

The green div can be toggled. Sometimes the green div will have display: none, and then the orange div will stretch to the bottom. When the green div has display: block again, it will look like the picture again.

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

So far I can get the green div to go to the bottom by:

position: absolute;
bottom: 0;

但我不知道如何获取橙色div来做我想要的。 >

But I don't know how to get the orange div to do what I want.

推荐答案

您可以看看A List Apart的探索页脚，

you can take a look at "Exploring Footers" at A List Apart,

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

希望它有帮助，
Sinan

hope it helps, Sinan

(纯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%;
}

我可能会缺少一些细节，但这应该工作，

I might be missing some details, but this should work and it gives the basic idea behind the trick.

Sinan。

这篇关于窗口底部的Div和适应性高度div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！