网格高度动态对齐

Question

在我的页面中有两个部分。1.Div随内容动态变化，div的高度将随内容的变化而变化。2.柔性网格显示的一些内容。

到目前为止，我的柔性网格大小是恒定的，不管第1次DIV，content.When，1 div内容是非常少的，因为柔性网格高度是恒定的，所以在网格之后剩余的大量自由空间。在这里，我的挑战是安排灵活的栅格高度，以便覆盖整个页面取决于第一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);