股利调整大小高度与Gridstack容器

Question

我用了一个应用程序Gridstack.js框架，并有一定的格列：

<div class="col-lg-6 s_panel"> 
<div class="cont"> 
<!-- 1st div content --> 
</div> 
</div> 

<div class="col-lg-6 s_panel"> 
<div class="grid-stack"> 
<!-- Gridstack content --> 
</div> 
</div> 

而且我设置的第一个事业部的高度是一样的无论Gridstack容器是这样的：

$(document).ready(function() {   
    var divHeight = $('.grid-stack').css("height"); 
    $('.cont').css('height', divHeight); 
}); 

因此，对负载的div都是相同的高度，但如果Gridstack div有更多的项目加入到它和生长在高度，我想第一格也成为相同的高度。

是否有办法动态地让第一个div更改高度与gridstack div相同？

Answer 1

的高度设定续的高度万一你正在使用ajax调用，我建议你应该创建一个高度变化函数，而不是像这样$(document).ready：

var helpers = { 
    heightChange() { 
     var divHeight = $('.grid-stack').css("height"); 
     $('.cont').css('height', divHeight); 
    } 
}; 

然后在你的Ajax调用，使改变/数据放在.grid-stack你只需要打电话给你的功能，完整的代码，例如：

<script type="text/javascript"> 
    var helpers = { 
     heightChange() { 
      var divHeight = $('.grid-stack').css("height"); 
      $('.cont').css('height', divHeight); 
     } 
    }; 

    $.ajax({ 
     url: "test.php", 
     type: "post", 
     data: values , 
     success: function (response) { 
      $('.grid-stack').append(response); 
      //call height change here 
      helpers.heightChange(); 
     }, 
     error: function(jqXHR, textStatus, errorThrown) { 
      console.log(textStatus, errorThrown); 
     } 
    }); 
</script> 

希望这帮助，请随时告诉我你的其他问题。

Answer 2

这可以帮助你https://jsfiddle.net/4uqd3jqL/

$(document).ready(function() {    
 
    $('.cont').css('height', $('.grid-stack').css("height")); 
 
     
 
    setTimeout(function(){ 
 
     $('.grid-stack').css("height", $(this).height() + 100); 
 
     $('.cont').css('height', $('.grid-stack').css("height")); 
 
    }, 1000); 
 
});

.grid-stack{ 
 
    height:300px; 
 
    background: red; 
 
} 
 

 
.cont{ 
 
    height:200px; 
 
    background: blue; 
 
} 
 

 
.col-lg-6{ 
 
    width:50%; 
 
    display: inline-block; 
 
    float:left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-lg-6 s_panel"> 
 
<div class="cont"> 
 
<!-- 1st div content --> 
 
</div> 
 
</div> 
 

 
<div class="col-lg-6 s_panel"> 
 
<div class="grid-stack"> 
 
<!-- Gridstack content --> 
 
</div> 
 
</div>

因为我没有任何Ajax调用呢，我已经使用的setTimeout。

在setTimeout的我增加网格堆叠容器的高度由100像素 &然后通过网格堆叠

Answer 3

您可以简单地使用css而无需jquery或javascript。

使用css flex属性。

.s_panel_container { 
 
    display: flex; 
 
} 
 
.s_panel { 
 
    flex: 1; 
 
} 
 
.cont { 
 
    background-color: pink; 
 
} 
 
.grid-stack { 
 
    background-color: #ccfff5; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    
 
<div class="s_panel_container"> 
 
     <div class="col-lg-6 s_panel cont"> 
 
     1st div content 
 
     </div> 
 
     <div class="col-lg-6 s_panel grid-stack"> 
 
     It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). 
 
     </div> 
 
    </div>