使用动态内容调整父元素的大小

Question

我有一个样式div，其唯一子元素为h1。 h1的文本通过javascript动态更改。

将新文本插入h1标签后，将测量h1的高度，然后使用其更改其父div元素的高度。

但是，父div会更改为h1的高度，但会包含填充，从而导致没有实际的填充。

使用动态h1子级的测量高度时，如何获取带有填充的父元素以正确调整自身大小（填充中的因子）。

Answer 1

只需将父div的宽度和高度设为“自动”，然后当h1调整大小时，它将自动调整大小

Answer 2

通过添加CSS填充，浏览器应自动执行此操作，如本例所示 。 您无需编写脚本即可专门处理此问题。 在下面的示例中，当文本添加到红框（h1）时，黑框（div）将动态垂直增长。

HTML：

<input type="text" id="txt" value="1 2 3 4 5 6 7 8" />
<div class="d1">
    <h1 id="h1" class="h1">1 2 3 4 5 6 7 8</h1>
</div>

CSS：

.d1 {
    border: 1px solid black;
    padding: 5px;
}

.h1 {
    border: 1px solid red;
    padding: 5px;
    width: 50px;
}

脚本：

$("#txt").change(function () {
    $("#h1").text($("#txt").val());
});
$("#txt").keyup(function() {
    $("#h1").text($("#txt").val());
});