如何随着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

您好，我为您创建了一个 JSFiddle，这里是 link 希望这会有所帮助

HTML

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

Answer 2

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

HTML 代码：

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

CSS 代码：

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

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

查看jsfiddle

Answer 3

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

我在这里分享了你的代码，但我没有发现任何问题，它在这里工作正常