动态对齐网格高度

Question

在我的页面中有两个部分。 1.Div具有动态内容，div的高度将根据内容而变化。 2.A Flexigrid显示一些内容。

截至目前，无论第一个DIV内容如何，​​我的flexigrid大小都是恒定的。当第一个div内容非常小时，因为flexigrid高度是恒定的，因此在网格之后留下了大量的自由空间。 在这里，我的挑战是安排flexigrid高度，以覆盖整个页面取决于第一个DIV高度。

我使用offset.which编写了一些代码，但工作正常但不是最佳。

  

这是代码

 function calcHeight() {



     var grid = $('.flexigrid').offset().top + $('.flexigrid').height();
     var footer = $('#footer').offset().top;

     var req_height;
     //checking if page has a scroll or not.
     if (grid > footer) {
         req_height = $('.bDiv').height() - $('.flexigrid').offset().top;
     } else {
         req_height = $('.bDiv').height() + footer - grid;

     }


     return req_height;


 }

 function setHeight() {

     var req_height = calcHeight();

     var styleElement = document.getElementById('styles_js');
     if (!styleElement) {
         styleElement = document.createElement('style');
         styleElement.type = 'text/css';
         styleElement.id = 'styles_js';
         document.getElementsByTagName('head')[0].appendChild(styleElement);
     }
     var newStyle = '.bDiv{height:' + req_height + 'px!important}';
     styleElement.appendChild(document.createTextNode(newStyle));
 }

调用setHeight()函数，然后调用calcHeight来计算所需的高度。 如果可以通过其他方式完成，请告诉我。

Answer 1

试试这样：

var windowheight = $(window).height();
var dynamicContentHeight = $(window).height();
var headerHeight = $("#header").height();
var footerHeight = $("#footer").height();


var gridheight = windowheight - headerHeight - footerHeight - dynamicContentHeight;

$("#gridheight").css("height", gridheight);