Question

我在应用中使用了Gridstack.js框架，并且有一些div列：

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

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

{{1}}

因此在加载时，div都是相同的高度，但如果Gridstack div添加了更多项并且高度增加，我希望第1个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/

 "for (int j = 1; i < length; j++)"

Should this be: for (int j; j<length; j++)?

$(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;
}

由于我没有任何Ajax调用，我使用了 setTimeout 。

在setTimeout中，我增加 网格堆栈容器的高度 100px ＆amp;然后将 cont 的高度设置为 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>

Div使用Gridstack容器调整高度

3 个答案: