限制 contenteditable 的大小答案

【问题标题】：Restrict the size of contenteditable限制 contenteditable 的大小
【发布时间】：2021-02-22 22:22:07
【问题描述】：

我正在构建一个程序，您可以在其中将复制的 HTML 从您的 Web 浏览器插入到程序中，然后使用 contenteditable div 标记对其进行编辑，但是复制的 HTML 会溢出 div 并且不会应用相对于我的样式div 但是到整个屏幕，有没有办法防止呢？

document.getElementById("HTMLMD").contentEditable = html;

#container-HTMLMD {
  overflow: auto;
  background-color: white;
  height: 100vh;
  width: 50%;
}
#HTMLMD {
  padding: 5px;
}

<div id="container-HTMLMD">
  <div id="HTMLMD" spellcheck="false"></div>
</div>

结果（顶栏应该只占其他元素宽度的一半）：

【问题讨论】：

把100vh改成50vh?
哦，我看到我的代码不清楚，#container-HTMLMD div 是具有width: 50vw 的 div 的子元素，我希望 contenteditable div 只占屏幕宽度的一半div 中的所有其他元素，但 google 搜索栏
请不要回答这个问题。我已回滚/编辑您的问题并删除了答案。仅在答案部分添加答案。

标签： javascript html css contenteditable

【解决方案1】：

解决方案：我检查了html内容，发现溢出的项目是position: absolute和position: fixed的项目，我通过首先设置#HTMLMD { position: relative }解决了问题，这解决了position: absolute项目的问题，然后我编写了JS脚本：

let children = inner.getElementsByTagName("*");
children.forEach((e) => {
  if (e.style.position === "fixed") e.style.position = "absolute";
});

它将所有带有position: fixed 的项目设置为position: absolute，这绝对不是最佳解决方案，但它适用于我的情况。

【讨论】：