根據孩子絕對分格調整父母div高度

那麼這個問題是我的previous question的續集，我可以在其中部分地得到答案。根據孩子絕對分格調整父母div高度

我需要計算content div高度並將其應用於wrapper div基於textarea自動擴展。

現在擴大主分區工作，但wrapper當我刪除textarea/content div的內容時，div高度不會相應減少。這是因爲默認情況下，我正在計算content div的高度，但不會重置它。以下線這是否

var divHeight = $('.content').height(); 
$('.wrapper').css('min-height', divHeight+40+'px');

如何使它自動調整大小wrapper div的高度。

DEMO Here

來源

2015-05-14 Sowmya

添加回調插件的.animate功能，並從那裏執行調整大小。（另外，從.kepress事件刪除的調整大小代碼）

box.stop().animate({ 
    height: newHeight 
}, opts.speed, 
function() { 
    var divHeight = $('.content').height(); 
    $('.wrapper').css('min-height', divHeight + 40 + 'px'); 
})

http://jsfiddle.net/mnawkgqL/10/

來源

2015-05-14 10:56:41

這隻能如果u通過起訴退格（一一）刪除textarea的內容，但是當你選擇所有，並在一杆刪除它不會工作。 – Sowmya

看看更新後的文章與工作小提琴。希望有幫助 –

@JakoBasson退格不起作用還有其他小問題... –

一種解決方案是不使用position:absolute元件。

所以你的主要問題是你的.content設置爲position:absolute。
由於這種絕對定位，您需要動態檢索更改的高度，以便將其應用於父DIV。

另一種解決方案：

jsFiddle demo

var $content = $('.content'), // Cache your selectors for a better performance 
 
    $wrapper = $('.wrapper'), 
 
    $textarea = $("textarea"); 
 

 
function setContentHeight() { 
 
    $wrapper.css('min-height', $content.height() + 40); 
 
} 
 

 
$textarea.on("input change", function() { 
 
    $(this).height(1).height(this.scrollHeight); // manipulate textarea height 
 
    setContentHeight(); 
 
}).change();          // Trigger 
 

 
// When do we need to reflect .content height? 
 
setContentHeight();        // Immediately 
 
$(window).on("resize", setContentHeight);   // and on win resize

.wrapper{ 
 
    background:#f90; 
 
    position:relative; 
 
} 
 
.content{ 
 
    background:#DCFFC8; 
 
    margin:10px; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    right:0; 
 
    padding:10px; 
 
} 
 
textarea{ 
 
    outline:none; 
 
    resize: horizontal; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="content"> 
 
    <p> 
 
     lorem ipsum... 
 
    </p> 
 
    <div> 
 
     <textarea></textarea> 
 
    </div> 
 
    </div> 
 
</div>

來源

2015-05-14 11:42:14

-1

更改CSS文件問題得到解決

.wrapper{ 
    background:#f90; 

} 
.content{ 
    background:#DCFFC8; 
    margin:10px; 

    top:0; left:0; padding:10px 
} 

textarea { outline: none; }

查看它：https://jsfiddle.net/mnawkgqL/9/embedded/result/

來源

2015-05-14 12:10:40

它必須是'position：absolute'。否則刪除'絕對'你的答案不比已經提供的答案更好。 –

根據孩子絕對分格調整父母div高度

回答

相關問題