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"（Bootstrap）。

最初它的工作正常但我在该div中有一些内容可以添加到用户端（添加新的教育等），以便内容移动到主div之外并且看起来有线。

Answer 1

选中此选项可获得全屏结果 - 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 2

道歉，如果这不是你想要的 - 我想是的？ - 但是如果你希望'divMain'占据浏览器窗口100％的宽度和宽度。高度，你可以用CSS做到这一点 - 只需将它设为一个位置：绝对＆lt; div＆gt;

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

因此默认情况下它的高度为100％，但如果＆lt; table＆gt;内容高于页面，divMain将延伸。

（在Chrome上测试）

Answer 3

谢谢你们，但我找到了解决这个问题的方法。我已经改变了我的函数体：

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

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

所以现在最初主要的div具有最小高度作为浏览器高度，当主div的内容增加时，主div的高度也将增加。

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

3 个答案: