Javascript 文本区域'；设置高度后，父对象的大小调整停止工作

我有一个父div，里面有一个文本区域。动态抓取textarea的一角以调整其大小时，父div也会调整大小。太好了

但是，当我使用javascript设置div的高度时，textarea将不再调整父div

如何使用Javascript设置父div的高度，并且仍然可以从浏览器中调整高度

这只是一个例子。我想调整div中的其他东西的大小，所以我不能只调整textarea的大小并保持div高度为auto

<style>
.parent{
  background-color: blue;
}

.child {
  background-color: red;
 resize: vertical;
}
</style>

<div class="parent" id="container">
<textarea class="child" id="content">
  Hello World!
</textarea>
</div>
<button id="btn">
  Set Height
</button>

<script>
    document.getElementById("btn").addEventListener("click", function() {
    document.getElementById("container").style.height = "100px";
    document.getElementById("content").style.height = "90px";
  });
</script>

.家长{
背景颜色：蓝色；
}
.孩子{
背景色：红色；
调整大小：垂直；
}
你好，世界！
设定高度
document.getElementById（“btn”）.addEventListener（“单击”，函数）（）{
document.getElementById（“容器”）.style.height=“100px”；
document.getElementById（“内容”）.style.height=“90px”；
});

如果我理解正确，您希望在单击按钮时根据父对象的大小调整textarea。并在调整大小时在文本区域上调整父对象的高度

如果是，请将

.parent

设置为具有

高度：自动

，然后单击按钮-设置其

.child

元素的高度，而不是设置其高度

document.getElementById（“btn”）.addEventListener（“单击”，函数（）{
document.querySelector（“.child”）.style.height=“100px”；
});
.parent{
背景颜色：蓝色；
高度：自动；
}
.孩子{
背景色：红色；
}

你好，世界！
设置高度
据我所知，在为父div指定固定高度后，您希望能够调整父div内的textarea的大小

这意味着textarea不应使父div溢出。要实现这一点，只需将父div的overflow属性设置为hidden

看到这个了吗

还可以查看一下
调整父div的高度后，只需将其设置回
auto
。确保你也调整了孩子们的高度，否则它会跳回文本区域的大小

document.getElementById（“容器”）.style.height=“自动”

以下是完整的代码：

<style>
.parent{
  background-color: blue;
}

.child {
  background-color: red;
 resize: vertical;
}
</style>

<div class="parent" id="container">
<textarea class="child" id="content">
  Hello World!
</textarea>
</div>
<button id="btn">
  Set Height
</button>

<script>
    document.getElementById("btn").addEventListener("click", function() {
    document.getElementById("container").style.height = "100px";
    document.getElementById("content").style.height = "90px";
    document.getElementById("container").style.height = "auto";
  });
</script>



.家长{
背景颜色：蓝色；
}
.孩子{
背景色：红色；
调整大小：垂直；
}
你好，世界！
设定高度
document.getElementById（“btn”）.addEventListener（“单击”，函数）（）{
document.getElementById（“容器”）.style.height=“100px”；
document.getElementById（“内容”）.style.height=“90px”；
document.getElementById（“容器”）.style.height=“自动”；
});
尽管这实现了我想要看到的，但它对我的用例不起作用。我需要一个可以设置父div高度的答案，因为它里面还有其他东西。好的，所以必须是父div来更改高度。等等，事实上我知道了。设置父元素的高度后，使用
document.getElementById（“容器”）.style.height=“auto”将其再次重置为自动哦。太棒了！我正要更新我的答案以使用
MutationObserver
，但现在看来你自己没事了。对不起，如果我没有把事情说清楚……我会尽量给你一个更详细的解释。我需要的是设置父div的高度，而不是将其“固定”。我想根据用户事件给它一个特定的高度，但仍然可以通过浏览器进行扩展。你的意思是希望父div具有响应性吗？。因此，它应该相对于浏览器窗口大小自动调整大小？您是否尝试过使用最小高度而不是固定高度？
<style>
.parent{
  background-color: blue;
}

.child {
  background-color: red;
 resize: vertical;
}
</style>

<div class="parent" id="container">
<textarea class="child" id="content">
  Hello World!
</textarea>
</div>
<button id="btn">
  Set Height
</button>

<script>
    document.getElementById("btn").addEventListener("click", function() {
    document.getElementById("container").style.height = "100px";
    document.getElementById("content").style.height = "90px";
    document.getElementById("container").style.height = "auto";
  });
</script>