Chrome 应用在全屏模式下新建 window - html 元素不是全高

Question

我在全屏模式下创建新的 window 时遇到问题，但 window 中的内容最终并未占据全屏。 html 元素最终的高度约为 83px。我希望它占据 window 的全部大小，因为我在上面设置了某种背景颜色等。我在应用程序的其他地方以类似的方式创建 windows，它工作正常，但在这个特定实例中它没有。我不确定我错过了什么。

这是用于创建 window:

的代码

chrome.app.window.create('connectionError.html', { id: 'connectionError', state: 'fullscreen'}, function() {
    chrome.app.window.get('connectionError').fullscreen();
});

这是结果页面的 html：

<!DOCTYPE html>
<html>
  <head>
      <meta charset='utf-8'>
      <title>Connection Error</title>
      <link rel="stylesheet" type="text/css" href="css/application.css">
      <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
      <script src="js/jquery-2.1.0.min.js"></script>
      <script src="js/bootstrap.min.js" type="text/javascript"></script>
      <script src="js/connectionError.js"></script>
  </head>


  <body>
    <div id="connectionErrorContainer" class="container">
        <div id="connectionError" class="col-md-12">
          <div class="alert alert-danger" role="alert" style="display:table-cell; vertical-align:middle; float:none;">Unable to connect. Please check your internet connection.</div>
        </div>
        <button id="restart" class="btn btn-primary">Restart</button>
    </div>
  </body>
</html>

Answer 1

你没有 post 你的 CSS 所以我不确定，但我敢打赌这就是你所缺少的：html,body,#your-element { height: 100%; }

或者，如果您只定位 chrome，您只需将 height: 100vh 添加到您的元素即可。

Chrome 应用在全屏模式下新建 window - html 元素不是全高

Chrome app create new window in fullscreen - html element is not full height

html

javascript

google-chrome-app