javascript - 如何将HTML调整到一定高度？ (没有包装)

重要提示：我需要没有任何div或其他包装程序来执行此操作。

我想将可滚动文本放入固定大小的框架中...

https://jsfiddle.net/x128/yf4btorn/

CSS：

html {
  background: url("https://upload.wikimedia.org/wikipedia/commons/d/d9/IPhone_5s_golden.svg") no-repeat fixed;
  background-size: 300px 630px;
  background-position: center;
}
body {
  position: absolute;
  width: 240px;
  left: 50%;
  margin-left: -120px;
}

添加任何长文本：

for (i = 0; i < 20; i++) {
  var div = document.createElement("DIV");
  div.innerText = "This text should fit into the phone \"screen\"";
  document.body.appendChild(div);
  var input = document.createElement("INPUT");
  document.body.appendChild(input);
}

为什么HTML高度/边距/填充不影响显示的高度？



附言我真的需要没有divs / tables / etc的滚动条。我希望我的body由第三方代码（p5.js）完全控制，我只能添加CSS或JS文件。

最佳答案

像这样更改css。隐藏html的溢出并相对于黑屏固定正确的正文高度和宽度。

See the demo fiddle

html {
  background: url("https://upload.wikimedia.org/wikipedia/commons/d/d9/IPhone_5s_golden.svg") no-repeat fixed;
  background-size: 300px 630px;
  background-position: center;
  overflow:hidden;
}

body {
  position: absolute;
  top:10px;
  width: 260px;
  height:450px;
  left: 50%;
  margin-left: -130px;
  overflow:auto;
}

关于javascript - 如何将HTML调整到一定高度？ (没有包装)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41073335/