Div Redimensionierung Höhe mit Gridstack Behälter

Question

ich den Gridstack.js Rahmen in einer App und bin mit ein paar div Spalten haben:

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

Und ich bin die Höhe der ersten Div Einstellung die gleiche sein wie Was auch immer der Gridstack Behälter ist wie folgt:

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

So auf Last sind die divs beide gleich groß, aber wenn die Gridstack div mehr Einzelteile hat es gegeben und wächst in die Höhe wollte ich das erste div auch als die selbe Größe.

Gibt es eine Möglichkeit, die Höhe des ersten Div dynamisch so zu ändern, dass es mit dem Gridstack-Div übereinstimmt, wie es eingestellt ist?

Answer 1

Bei von cont durch Höhe rasterStapelEinstellung Sie verwenden Ajax Anruf, würde ich vorschlagen, dass Sie eine Funktion der Höhenänderung anstelle von $(document).ready wie folgt erstellen sollten:

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

Und dann in der Ajax-Aufruf zu machen Änderung/Put-Daten in .grid-stack Sie Ihre Funktion, vollständigen Code zum Beispiel aufruf müssen:

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

Hoffnung dieser Hilfe, können Sie mir Ihre andere zu sagen, Problem.

Answer 2

Das könnte Sie 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>

Da ich keine Ajax-Aufruf helfen, ich SetTimeout verwendet haben.

In SetTimeout ich zunehmenden die Höhe des rasterStapel Behälter durch 100px & dann die Höhe

Answer 3

Sie erreichen dies einfach mit css ohne jquery oder javascript.

Verwenden Sie css flex Eigenschaften.

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