-->

DIV在窗口底部的和适应性强的高度DIV(Div at bottom of window and a

2019-07-04 00:00发布

有没有办法让一个div永远是在窗口的底部,而另一个div来改变它的高度,以填补其留下任何空间,而如果其含量过长该专区将滚动。 (我从来不希望窗口滚动)。

这最好通过一个图片所示:

DIV布局http://img401.imageshack.us/img401/3209/divs.png

绿色的div将始终把自己在窗口的底部,橙色的div将填补这一空白。 当窗口较小,像右手图像中,橙色格将更小,将滚动。

绿色DIV进行切换。 有时绿格将display: none ,然后橙色DIV将延伸至底部。 当绿色div有display: block再次,它看起来像图片吧。

它在IE6工作。

到目前为止,我可以得到绿格去的底部:

position: absolute;
bottom: 0;

但我不知道如何获得橙色的div做我想做的。

Answer 1:

你可以在“探索页脚”在一个列表看看除此之外,

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 2:

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

position: fixed;
bottom: 0;


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之间的空间



Answer 5:

我不认为这是可能没有工作了使用Javascript中心div的大小。

CSS定位基本上是从上向下流动,因此要获得一个div粘在你需要把它拿出来使用位置的页面流页面的底部:绝对(或位置:固定)

但现在该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 at bottom of window and adaptable height div