如何随着div高度的增加更改边框

Question

我有一个包含文本区域的div。这个div有一个边框：1px纯黑。现在，当用户在textarea中键入时，textarea将增长。

我有这个密码-

$('#sendtext').on('input', function(){
        $this = $(this);
        var totalHeight = $this.prop('scrollHeight') - parseInt($this.css('padding-top')) - parseInt($this.css('padding-bottom'));
        $this.height(totalHeight);
        $div = $('#sendmsg');
        $div.height($div.prop('scrollHeight') - parseInt($div.css('padding-top')) - parseInt($div.css('padding-bottom')))
    });

现在外部div（外部到文本区域）也随之增长。但这种高度的变化并没有体现在边框上。边界留在那里。如果可能的话，我该如何实现呢？

PS-当我在Chrome（Ctrl Shift I）中看到时，我的外部潜水高度会增加，但是边界没有反映这种变化。

HTML-

<div id="sendmsg">
                                    <textarea id="sendtext" value="">
                                    </textarea>
                                    <div class="clearBoth"></div>
                                </div>

CSS-

#sendmsg{width:100%; height:auto;}
#sendtext{width:95%; margin:10px; padding:5px; transition: width 0.25s; resize:none; overflow:hidden;}
.clearBoth{clear:both;}

Answer 1

$('#sendtext').on('input', function() {
  $this = $(this);
  var totalHeight = $this.prop('scrollHeight') - parseInt($this.css('padding-top')) - parseInt($this.css('padding-bottom'));
  $this.height(totalHeight);
  $div = $('#sendmsg');
  $div.height($div.prop('scrollHeight') - parseInt($div.css('padding-top')) - parseInt($div.css('padding-bottom')))
});

#sendmsg {

  width: 100%;

  height: auto;

  border: 1px solid #000;

}

#sendtext {

  width: 95%;

  margin: 10px;

  padding: 5px;

  transition: width 0.25s;

  resize: none;

  overflow: hidden;

}

.clearBoth {

  clear: both;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="sendmsg">
  <textarea id="sendtext" value="">
  </textarea>
  <div class="clearBoth"></div>
</div>

Answer 2

请看这个。这可能对你有帮助

超文本标记语言代码：

<div>
    <textarea></textarea>
</div>

CSS代码：

div{
    height: 200px;
    width: 300px;

}
textarea{
    height: 100px;
    width: 100%;
    box-sizing:border-box 
}

检查jsfiddle

Answer 3

您好，我为您创建了一个JSFIDLE，这里是一个链接，希望对您有所帮助

超文本标记语言

<div>
    <textarea id='grow'></textarea>
</div>

CSS

div{
   width: 400px;
   border:solid 1px #333;
   padding:10px;
}
textarea{
   overflow: hidden;
   min-height: 50px;
   max-height: 100px;
}

JavaScript/jQuery

$(document).ready(function(){
   $('#grow').keyup(function(e) {
      $(this).css('height','5px');
      var a = document.getElementById('grow').scrollHeight+'px';
      $(this).css('height',a);
   });
});