div CSS自動調整高度以適應內容

Question

我有一個具有自動高度和可調整的textarea的div。 我希望父div根據內容自動展開/折疊。

要在Chrome中重新創建問題，請執行以下操作：

1. 向下調整文本框的大小以增加父div的高度
2. 重新調整文本框的大小，使其回到初始位置。 您會看到父高不會縮回。

*可拖動的文本區域僅表示select2框。

這是下面的jsFiddle ：

 #parent { background-color: green; -webkit-column-count: 2; } 

 <div id="parent"> <div> <textarea></textarea> </div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> </div> 

折疊文本區域后，如何使div縮回/折疊回初始高度？

Answer 1

我已經為您的jsfiddle添加了相關的Javascript代碼以實現所需的功能，請查看鏈接：

自動填充文本區域

 var autoExpandTextArea = function (textAreaName, maxRows, minRows) { var textarea = document.getElementById(textAreaName); var limitRows = maxRows; if(textarea === null || minRows > maxRows) return; var commonEventHandlerCode = function(textAreaA, limitRowsB, scrollHeightC) { var rows = parseInt(textAreaA.getAttribute("rows")); if (rows < limitRowsB && textAreaA.scrollHeight > scrollHeightC) { rows++; } else if (rows > 1 && textAreaA.scrollHeight < scrollHeightC) { rows--; } scrollHeightC = textAreaA.scrollHeight; textAreaA.setAttribute("rows", rows); }; textarea.setAttribute("rows", minRows); var messageLastScrollHeight = textarea.scrollHeight; if ($.browser == "MSIE") { $(textarea).keyup = function () { commonEventHandlerCode(textarea, limitRows, messageLastScrollHeight); }; } else { textarea.oninput = function () { commonEventHandlerCode(textarea, limitRows, messageLastScrollHeight); }; } }; autoExpandTextArea("textarea", 4, 2); 

 #parent{ background-color:green; -webkit-column-count:2; } 

 <div id="textarea"> <div><textarea></textarea></div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> </div> 

Answer 2

如果您不指定固定高度，則父div（#textarea）會自動調整大小。 如果您只想垂直調整大小而不是嘗試使用-

textarea {
    resize: vertical;
    overflow: auto;
}

Answer 3

考慮使用contenteditable屬性代替textarea。 它會像普通的塊元素一樣工作（因此會擴展更多內容），但它是不可編輯的。 缺點是它需要JavaScript將其內容添加到表單字段中，以便可以將其發布到服務器。

有關示例，請參見此編輯的小提琴 。
編輯：添加了一個示例，說明可編輯內容在編輯后如何折疊到其初始大小。

Answer 4

CSS列分配存在許多錯誤，這可能是Masonry被大量使用的原因。

您可以嘗試強制Webkit瀏覽器重新呈現textarea輸入或調整大小的列。 另一個問題是：webkit不會在textarea上觸發調整大小事件，因此您也需要定義它：

 $(document).on('ready', function() { /* Chrome does not trigger textarea resize: */ $('textarea').each(function (i) { var thisTextarea = $(this); thisTextarea.data('x', thisTextarea.outerWidth()); thisTextarea.data('y', thisTextarea.outerHeight()); thisTextarea.on('mouseup', function (e) { if (thisTextarea.outerWidth() != thisTextarea.data('x') || thisTextarea.outerHeight() != thisTextarea.data('y')) { thisTextarea.trigger('resize'); }; thisTextarea.data('x', thisTextarea.outerWidth()); thisTextarea.data('y', thisTextarea.outerHeight()); }); }); var colContainer = $('#parent'); $('textarea').on('input resize', function (e) { colContainer.css({ '-webkit-column-count': '1' }); setTimeout(function () { colContainer.css({ '-webkit-column-count': '2' }); }, 0); }); }); 

 #parent { background-color: green; -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="parent"> <div> <textarea></textarea> </div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> </div> 

游樂場小提琴

Answer 5

我用一些jQuery來匹配高度。

例如。

function equalHeight() {
    //Checks if the leftside height is bigger           
    if ($(".leftside:visible").height() >= $(".rightside:visible").height()) { 
        $(".rightside:visible").height($(".leftside:visible").height());        

        //  alert("Changing to leftside height");
    } else {
        //Change leftside height to the current rightside
        $(".leftside:visible").height($(".rightside:visible").height());

        //alert("Changing to rightside height");
    }
}