javascript - 动态对齐网格高度

Question

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

到目前为止，我的 Flexigrid 大小是恒定的，无论第一个 DIV 内容如何。当第一个 div 内容非常少时，因为 Flexigrid 高度恒定，所以网格后留下了很多可用空间。 这里我的挑战是根据第一个 DIV 高度来安排 Flexigrid 高度以覆盖整个页面。

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

Here is the code

 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);