如何使用 chrome 应用程序窗口动态调整 textarea 的大小？答案

【问题标题】：how could I make a textarea dynamically resize with the chrome app window?如何使用 chrome 应用程序窗口动态调整 textarea 的大小？
【发布时间】：2015-02-13 15:27:20
【问题描述】：

我一直在尝试制作一个完全由 textarea 填充的 chrome 应用程序，我想让该 textarea 使用应用程序窗口动态调整大小。我不想使用任何外部库，例如 jquery。

我的html是：

<!DOCTYPE html>
<html>
  <head>
    <title>Plain Spellcheck</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script type="text/javascript" src="main.js"></script>
  </head>
  <body>
    <textarea id="textarea" spellcheck="true" class="textarea"></textarea>
  </body>
</html>

我没有找到任何有用的 css，所以我不会发布几乎空的样式表。

我的非功能性和公认的错误代码是：

function windowHeight(){
  var mainWindow = chrome.app.window.get("mainWindow");
  var height = mainWindow.innerBounds.height;
  var textarea = document.getElementById("textarea");
  var newHeight = parseInt(height);
  var fixedHeight = newHeight * 0.04;
  var height = newHeight - fixedHeight;
  var height = height.toString();

  textarea.style.height = height + "px";
}

document.addEventListener("DOMContentLoaded", function(){
  var target = window.innerHeight;

  var observer = new MutationObserver(function(mutations){
    mutations.forEach(function(mutation){
      chrome.app.window.onBoundsChanged.addListener(windowHeight());
    });
  });

  var config = {attributes:false, childList:false, characterData:true};

  observer.observe(target,config);
});

【问题讨论】：

查看this answer 以获得类似问题的解决方案。

标签： javascript css google-chrome-app

【解决方案1】：

CSS：

html, body, #textarea
{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

【讨论】：

对。我已经用 JavaScript 和纯 CSS 调整了大小，虽然 CSS 有时很难解决，但它是一种更好的方法。
如果文本区域的侧面和底部没有被切断，这将起作用。此外，如果我将 textarea 的宽度/高度设置为小于 100% 的任何值，则窗口最大化时会出现明显的间隙。
剪掉多少？我将编辑答案以考虑边框和填充。
截取的数量因窗口大小而异，所以我无法给出确切的答案。虽然不是很多，但仍然很明显。
感谢@phari，这似乎是最接近完美的事情，而且我们都知道计算机并不完美。我确实怀疑 Chromium 项目可能能够解决这个问题，但这是另一个网站和日子的问题 :)