1

我在应用程序中使用 Gridstack.js 框架并有一些 div 列：

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

我将第一个 Div 的高度设置为与 Gridstack 容器的高度相同：

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

所以加载时 div 的高度相同，但如果 Gridstack div 添加了更多项目并且高度增加，我希望第一个 div 也具有相同的高度。

有没有办法动态地使第一个 div 更改高度与调整后的 Gridstack div 相同？

4

3 回答 3

2

如果您使用 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>

希望对您有所帮助，请随时告诉我您的其他问题。

于 2017-07-18T05:26:29.623 回答
0

您可以简单地使用css没有 nayjquery或javascript.

使用 cssflex属性。

.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>

于 2017-07-18T05:53:20.520 回答
0

这可能会帮助你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 中，我将网格堆栈容器的高度增加了100px，然后将cont的高度设置为网格堆栈的高度

于 2017-07-18T04:37:34.943 回答