Div 使用 Gridstack 容器调整高度

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

这可能对你有帮助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 & 然后通过 grid-stack

的高度设置 height of cont

Answer 2

如果您使用 ajax 调用，我建议您应该创建一个高度变化函数，而不是像这样的 $(document).ready：

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

然后在 ajax 调用 .grid-stack 中生成 change/put 数据，你只需要调用你的函数，完整代码例如：

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

Div 使用 Gridstack 容器调整高度

Div resizing height with Gridstack container

html

jquery

gridstack