使用 Gridstack 容器调整 Div 高度

Question

我在一个应用程序中使用 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 相同？

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 中，我增加 grid-stack 容器的高度 100px 然后设置 height of cont by height of grid-stack

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>