div css自动调整高度到内容答案

【问题标题】：Div css auto adjust height to content dynamicallydiv css自动调整高度到内容
【发布时间】：2015-11-03 05:59:59
【问题描述】：

我有一个具有自动高度和可调节文本区域的 div。我希望父 div 根据内容自动展开/折叠。

在 Chrome 中重现问题：

向下调整文本框的大小以增加父 div 的高度
将文本框的大小重新调整回其初始位置。您会看到父高度没有缩回。

*可拖动的文本区域只是一个选择框的表示。

这是下面的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 缩回/折叠回初始高度？

【问题讨论】：

解释一下自己。什么初始高度？你是什么意思崩溃？哪个“内容”？这些都不在您的代码中...
@misterManSam - 我不能在那里拖任何东西。 [披露：使用 IE :-)]
@Amit - 是的，IE 不会调整文本区域的大小。这似乎只是 Chrome 中的一个问题（Firefox 可以调整大小，但父级确实收回）
Milo - 你在用 Chrome 吗？
@Milo Cabs 你能解释一下你的代码是什么意思吗...？

标签： html css google-chrome

【解决方案1】：

我已将相关的 Javascript 代码添加到您的 jsfiddle 以获得所需的功能，请查看链接：

Auto Fill Textarea

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>

【讨论】：

请添加一些关于 javascript 正在做什么的扩展。但是，这似乎不起作用......父母仍然没有收回。
好吧，简而言之，我添加了一个事件监听器，检查 textarea 的高度和 textarea 的滚动高度，所以如果它低于内容高度，则行增加，如果是更高，有递减....是的，如果您不扩展 textarea，它确实会缩回，但是，我正在使用扩展的 textarea 寻找更好的解决方案！

【解决方案2】：

如果您不提供固定高度，您的父 div(#textarea) 将自动调整大小。如果您只想垂直调整大小而不是尝试使用 -

textarea {
    resize: vertical;
    overflow: auto;
}

【讨论】：

我关心的是父 div 以及如何在 textarea 收缩后使其恢复到原始高度。

【解决方案3】：

考虑使用contenteditable 属性作为文本区域的替代品。它将表现得像一个普通的块元素（因此扩展了更多的内容），但它是可编辑的。缺点是它需要 javascript 将其内容添加到表单字段，以便可以将其发布到服务器。

有关示例，请参阅 this edited fiddle。
编辑：添加了一个示例，说明可编辑对象在编辑后如何折叠到其初始大小。

【讨论】：

我实际上并没有使用文本区域。我只是展示了它来代表一个 select2 框。只是想知道如何在内容收缩时重新调整父 div 的大小。
查看新的小提琴：我不确定这是否是您想要的行为，但希望它可以让您了解如何将可编辑文件折叠回原来的大小。
是的，它崩溃了，但绿色的父 div 仍然没有
如果您在#editable 上设置overflow: hidden;，父级将折叠回来。但这意味着您无法滚动内容，但您始终必须单击/展开它。这可以接受吗？否则我会想一个更好的解决方案。
并非如此，因为它需要展开才能看到内容。

【解决方案4】：

CSS 列分布存在许多错误，这可能是 Masonry 被大量使用的原因。

您可以尝试强制 webkit 浏览器重新渲染 textarea 输入上的列或调整大小。另一个问题是：webkit 不会触发 textarea 上的 resize 事件，所以你也需要定义：

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

Playground Fiddle

【讨论】：

很好的解决方法。但我不能这样做，因为可能存在所有内容都是文本区域的情况。我认为在每个字段中添加这种逻辑有点过头了。
不确定你做了什么，但父背景不再调整大小

【解决方案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");
    }
}

【讨论】：