如何更改div高度增加的邊框

我有一個包含textarea的div。這個div有一個邊框：1px純黑色。現在，當用戶輸入textarea時，textarea會增長。如何更改div高度增加的邊框

我有這樣的代碼 -

$('#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（外到textarea的）增長它。但這種高度變化並未體現在邊界上。邊界停留在那裏。如果可能的話，我怎麼能做到這一點。

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

來源

2015-11-26 Nalin Agrawal

你可以請顯示HTML或包含一個例子（例如來自JSFiddle）？這會使答案更容易。 –

請將HTML和CSS代碼放在這裏 – khurram

添加了HTML和CSS –

請看this.It可以幫助你

HTML代碼：

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

CSS代碼：

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

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

檢查jsfiddle

來源

2015-11-26 04:43:29 letmedoit

我不希望在我的textarea中有滾動條。 –

使用'overflow：hidden'屬性@NalinAgrawal – letmedoit

嗨，我創建了一個的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); 
    }); 
});

來源

2015-11-26 05:20:07

我想我正在做類似的事情。但我的工作。你能找到我做錯了什麼嗎？我還添加了我的HTML和CSS。我感謝您的幫助。另外，PS - 當我在我的Chrome（Ctrl + Shift + I）中看到該外部潛水時，我的外部潛水的高度會增加，但邊界不會反映該變化。 –

好吧，我會嘗試在JSFiddle等待 –

嘿它的作品罰款在這裏看到http://jsfiddle.net/aminkodaganur/ydy2b3e6/ –

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

I'have共享你的代碼在這裏，但我看不出有什麼問題，它的做工精細這裏

來源

2015-11-26 06:51:22

是啊！我懂了。但是當我使用它時它不工作。它在這裏很好。你能想到我可以探索的一些可能的原因嗎？ –

嘗試在頂部的CSS文件中提供'* {box-sizing：border-box}'。 –

如何更改div高度增加的邊框

回答

相關問題