根据另一个div动态更改一个div的高度

Question

我的情况小样

我的CSS

  .left
 {
  width: 30vw;
  border-right: 1px solid;
  min-height: 80vh;
  float: left;
 }

 .right
 {
  min-height: 80vh;
 } 

如何更改基于右div的左div的高度及其边距？

Answer 1

只有CSS

 var str = "Cricket Australia chief executive James Sutherland and Bangladesh Cricket Board president Nazmul Hassan have different opinions over who made the decision to postpone Australia's tour of Bangladesh"; $('.addContent').click(function(){ $('.right').append(str); }); $('.addContent').click(); 

 .main { display: table; } .left { display: table-cell; padding-bottom: 20px; border-right: 1px solid; width: 30vw; } .right{ display: table-cell; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main"> <div class="left"> <input type="button" class="addContent" value="add"> </div> <div class="right"> </div></div> 

Answer 2

在您的javascript 演示中使用此javascript代码（

$(function(){ var str = "Cricket Australia chief executive James Sutherland and Bangladesh Cricket Board president Nazmul Hassan have different opinions over who made the decision to postpone Australia's tour of Bangladesh";

$('.addContent').click(function(){
    $('.right').append(str);
    $('.left').height($('.right').height());  
});

$('.addContent').click();
$('.addContent').click();
$('.addContent').click();
$('.addContent').click();
$('.addContent').click();
$('.addContent').click();
$('.addContent').click();
$('.addContent').click();
$('.addContent').click();
$('.addContent').click();
$('.addContent').click();
});

然后像下面那样更改您的css

.left
{
border-right: 1px solid;
height:100%;
width:20%;
float:left; 
}

.right
{ 
  float:right;    
  height:100%;
  width:79%;  
}

Answer 3

尝试这个。

 var str = "Cricket Australia chief executive James Sutherland and Bangladesh Cricket Board president Nazmul Hassan have different opinions over who made the decision to postpone Australia's tour of Bangladesh"; $('.addContent').click(function(){ $('.right').append(str); $('.left').height($('.right').height()); }); $('.left').height($('.right').height()); $('.addContent').click(); 

 .left { width: 30vw; border-right: 1px solid; float: left; } .left{ float: left; padding-bottom: 20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="left"> <input type="button" class="addContent" value="add"></div> </div> <div class="right"> </div> 

Answer 4

您可以使用类似：

$(document).ready(function () {
            var height = Math.max($(".left").outerHeight(), $(".right").outerHeight());
            $(".left").height(height);
            $(".right").height(height);
        });  

因此，无论您拥有什么动态内容，都将两个容器都添加到最高height ...但是，您需要浮动正确的容器，以便脚本获得正确的高度（带有溢出的内容）并为其设置固定的宽度。 我添加了border-box所以边距和边框都不会打扰。

JSFIDDLE