时间戳

首页 > 解决方案 > 不同大小的 Chrome 扩展弹出窗口

reactjs - 不同大小的 Chrome 扩展弹出窗口

问题描述

我目前在 HTML 的正文中设置了我的弹出窗口大小。这对其进行了硬编码，仅允许一种尺寸。

我需要它能够支持不同的弹出窗口大小。如果不将其硬编码到 app.js 或 HTML 中，我该如何做到这一点？

我正在使用 react 构建它，因此每个弹出窗口都是它自己的组件，并且会根据用户的操作以不同的大小呈现。

标签： reactjsgoogle-chromegoogle-chrome-extension

解决方案

为元素设置样式非常简单。如果你想成为一个固定大小的扩展弹出窗口，你应该使用 overflow:hiddle 或 overflow:scroll 并为元素添加适当的宽度和高度。对于固定大小的弹出窗口，您可以使用宽度和最小高度（可选）。另外，检查组件的边距。因为边距会改变您的弹出窗口大小。

<html>
  <head>
     <style type="text/css">
         body {
            width: 500px;
            height: 500px;
            overflow: hidden; /*or use overflow: scroll*/
         }
     </style>
  </head>
  <body>
     POPUP CONTENT
  </body>
</html>

推荐阅读