如何使用 chrome 应用程序 window 使文本区域动态调整大小？

Question

我一直在尝试制作一个完全由文本区域填充的 chrome 应用程序，我想让该文本区域随应用程序 window 动态调整大小。我不想使用任何外部库，例如 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 所以我不会 post 实际上是空的样式表。

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

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);
});

Answer 1

CSS:

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

如何使用 chrome 应用程序 window 使文本区域动态调整大小？

how could I make a textarea dynamically resize with the chrome app window?

javascript

css

google-chrome-app