2

我正在设计一个页面，其中 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>

where"eduGrid"是动态生成的（Bootstrap）。

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

4

3 回答 3

0

检查这个以获得全屏结果 - 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'});
    });
});

希望这就是你要找的。

于 2013-05-20T06:57:55.997 回答
0

抱歉，如果这不是您要找的东西-我认为是吗？- 但是如果你希望 'divMain' 占据浏览器窗口宽度和高度的 100%，你可以使用 CSS 来做到这一点 - 只需将其设为 position:absolute <div>

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

所以默认情况下它会有 100% 的高度，但是如果 <table> 的内容高于页面，divMain 会被拉伸。

（在 Chrome 上测试）

于 2013-05-20T10:38:11.450 回答
0

谢谢大家，但我找到了解决这个问题的方法。我将函数体更改为：

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

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

所以现在最初主 div 的最小高度是浏览器高度，当主 div 的内容增加时，主 div 的高度也会增加。

于 2013-05-22T04:33:39.273 回答