Question

有没有办法让div总是在窗口的底部，而另一个div来改变它的高度以填充它留下的任何空间，并且如果div的内容太长，div将滚动。（我从不希望窗口滚动）。

图片最好地说明了这一点：

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

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

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

它必须在IE6中运行。

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

position: absolute;
bottom: 0;

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

Answer 1

你应该使用固定而不是绝对

position: fixed;
bottom: 0;

Answer 2

你可以在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%;
}

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

思南。

Answer 3

测试一下。把它放在头上：

<script>
    var int=self.setInterval(function(){clock()},100);

    function clock()
    {
        var s = document.getElementById("Footer");
        s.style.position = "Fixed";
        s.style.bottom = "0px";
        s.style.margin = "0px";
        s.style.height = "20px";
        s.style.width = "30px";
    }

    window.onload=clock
</script>

html：

<div id="Footer"></div>

Answer 4

试试这个：设置橙色div位置相对底部边距=绿色div的高度溢出：自动

我认为你的橙色div会在它变得大于白色和绿色div之间的空间时滚动。要解决您的背景问题，您可以轻松地将橙色设置为背景颜色。这样，对于用户来说永远不会看到你的橙色div实际上更小，因为白色和绿色div之间的空间

Answer 5

如果不使用Javascript计算中心div的大小，我认为这是不可能的。

CSS定位基本上是从上到下流动，所以为了让div粘在页面底部你需要使用position：absolute（或position：fixed）

但是现在div已经超出了页面的流量，所以中间div不知道停在底部div的顶部。它只会在底部div后面继续显示，不会显示滚动条。

Answer 6

您可以使用以下解决方案让橙色的div来完成您想做的事情：

if ( ( $('.container-with-footer').height() ) < ( $(window).height() ) ) {
    $('footer').css({
        "position":"absolute",
        "left":"0",
        "right":"0",
        "bottom":"0"
    })
}

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

6 个答案: