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

Question

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

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

但是父div会改变h1的高度但包括填充因此导致没有实际的填充。

当使用动态h1子项的测量高度时，如何使用填充来获取父元素以正确调整其大小（在填充中进行分解）。

Answer 1

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

Answer 2

通过添加CSS填充，浏览器应自动处理此问题，如此example中所示。您不应该编写脚本来专门处理这个问题。在下面的示例中，黑色框（div）将在文本添加到红色框（h1）时垂直动态增长。

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