使用 Gridstack 容器调整 Div 高度

Posted 2023-02-19

【中文标题】使用 Gridstack 容器调整 Div 高度

【英文标题】：Div resizing height with Gridstack container

【发布时间】：2017-12-22 18:04:43

【问题描述】：

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

【问题讨论】：

所以只有通过这种方式让你的.cont div 用.grid-stack 调整大小。首先，将您的$(document).ready 更改为function，然后当.grid-stack 中的内容通过ajax 调用或其他方式更改时，您可以调用此function 来调整大小。

@vietnguyen09 将其放入 Ajax 函数中有效，如果您想正确放置，很乐意接受答案

查看我最近的答案并有所改进。

【参考方案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>

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

【讨论】：

是的，与我所做的类似，但这更加精致。谢谢！

很高兴能帮助你，很有礼貌的人

【参考方案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

【讨论】：

不是我想要的，但无论如何我感谢您的帮助，谢谢！

【参考方案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>