自定义代码编辑器添加CSS后功能失效求助

嘿，我找到问题所在啦！

你的CSS里没给<html>和<body>设置高度，再加上所有核心元素都是绝对定位（不占据文档流），导致body的高度直接变成了0。这会引发两个关键问题：

• 你的<textarea>设置了height: 100%，但这个百分比是基于父元素（body）的高度，所以textarea实际高度变成了0，根本没法输入内容；
• <iframe>的height: 100%也会因为同样的原因显示异常，点击Run后自然看不到任何更新。

移除CSS后，元素回到默认的文档流布局，body会根据内容自动获取高度，所以功能就恢复正常了。

修复后的CSS代码 #

html, body {
  height: 100%;
  overflow: hidden;
}
.editor {
  resize: none;
  position: absolute;
  top: 50px;
  left: 0px;
  width: 44%;
  border: none;
  background-color: #282c34;
  /* 用calc计算高度，减去header的50px，避免超出视口 */
  height: calc(100% - 50px);
  color: #fff;
  font-size: 15px;
  padding-left: 10px;
  padding-right: 15px;
  padding-top: 10px;
}
.run {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 50px;
  width: 150px;
  background-color: #04aa6d;
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
.run:hover {
  background-color: #fff;
  color: #616161;
}
.header {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 50px;
  width: 100%;
  background-color: #616161;
  /* 确保header在最上层，按钮不会被覆盖 */
  z-index: 10;
}
.result {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 55%;
  height: 100%;
  border: none;
  border-left: 15px solid #282c34;
}

额外说明 #

我还加了几个小优化：

1. 给<html>和<body>设置height:100%，让它们的高度铺满整个视口；
2. 把textarea的height改成calc(100% - 50px)，避免它因为top:50px加上height:100%而超出视口；
3. 给.header加了z-index:10，确保它始终在最上层，Run按钮不会被其他元素意外覆盖。

这样修改后，你的编辑器就能正常工作啦！

内容的提问来源于stack exchange，提问作者JSman225