如何在底部删除动态内容的空间？

Question

我正在设计一个页面，其中div的底部部分应该接触到页面的末尾，没有底部边距或填充，所以我将主div的高度设置为

 $(function() {
     $('.divMain').css({'height': (($(window).height())) + 'px'});

     $(window).resize(function() {
         $('.divMain').css({'height': (($(window).height())) + 'px'});
     });
 });

我的HTML是：

<div class="divMain">
    <table id="eduGrid"></table>
</div>

其中"eduGrid"是动态生成的(引导)。

最初它工作正常，但我在div中有一些内容可以在用户端添加(添加新教育等)，这样内容就可以移到主div之外，看起来像是有线的。

Answer 1

谢谢大家，但是我已经找到了这个问题的解决方案。我已经将我的函数体修改为：

        $(function() {
            $('.divMain').css({'min-height': (($(window).height()) - 70) + 'px'});

            $(window).resize(function() {
                $('.divMain').css({'min-height': (($(window).height()) - 70) + 'px'});
            });
        });

所以现在初始的main div有最小的高度作为浏览器的高度，当main div的内容增加时，main div的高度也会增加。

Answer 2

检查此选项以获得全屏结果- http://fiddle.jshell.net/DRRsn/1/show/light/

检查此文件中的小提琴代码- http://jsfiddle.net/DRRsn/1/

CSS

html,body{width:100%;height:100%; overflow:hidden; margin:0;padding:0;}
div{background:blue;}
table{background:pink;height:100%;;width:50%}

HTML

<div class="divMain">
<table id="eduGrid"></table>
</div>

JS

$(function() {
    $('.divMain').css({'height': (($(window).height())) + 'px'});
    $(window).resize(function() {
        $('.divMain').css({'height': (($(window).height())) + 'px'});
    });
});

希望这就是你要找的。

Answer 3

抱歉，如果这不是你想要的--我想是吧？--但是如果你想让'divMain‘占据100%的浏览器窗口的宽度和高度，你可以用CSS来做到这一点--只要把它设为一个位置：

.divMain {
    position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: auto;
}

所以在默认情况下，它会有100%的高度，但是如果内容比页面高，divMain就会拉伸。

(在Chrome上测试)