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

Question

Small Demo of My situation

我的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代码 DEMO （

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

试试这个。

＆＃13;

＆＃13;

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();

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

您可以使用以下内容：

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

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

<强> JSFIDDLE